Angular2 - 1つのストア、複数のコンポーネント、別々のAPI呼び出し

Question

たとえば、親コンポーネントであるHomeComponentと、複数のネストされたコンポーネントであるTeamsStandingComponentがあるとします。 TeamsStandingComponentは、共通のプライベートストアTeamsStandingStoreを使用して、API呼び出しから収集されたデータを表示する必要があります。

ここで私のコードを表示します。

HomeComponent：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'home', 
    templateUrl: '../templates/home.html' 
}) 
export class HomeComponent { 
    constructor(
) {} 
} 

そして、これがHomeComponentテンプレートです：

<div class="top-three-standings__wrapper"> 
    <teams-standing #standing1 [leagueId]="426"></teams-standing> 
    <teams-standing #standing2 [leagueId]="439"></teams-standing> 
</div> 

これはTeamsStandingComponentです：

import { Component, AfterViewInit, NgZone, ChangeDetectorRef, 
    ElementRef, Input } from '@angular/core'; 

import { TeamsStandingStore } from '../stores/teams-standing'; 
import { HttpClient } from '../services/http-client'; // you can ignore this 

@Component({ 
    selector: 'teams-standing', 
    providers: [HttpClient], // you can ignore this 
    templateUrl: '../templates/teams-standing.html' 
}) 
export class TeamsStandingComponent implements AfterViewInit { 

    @Input() private teams: Object; 
    @Input() private leagueId: string; 
    private teamsStandingStore: TeamsStandingStore; 

    constructor(
    private TeamsStandingStore: TeamsStandingStore, 
    private ngzone: NgZone, 
    private cdref: ChangeDetectorRef 
) { 
    console.clear(); 
    this.teamsStandingStore = TeamsStandingStore; 
    } 

    public ngAfterViewInit() { 
    this.ngzone.runOutsideAngular(() => { 

     this.teamsStandingStore.standings 
     .subscribe((data) => { 
      this.teams = data; 
      this.cdref.detectChanges(); 
     }); 
    }); 

    this.http.get(`competitions/` + this.leagueId + `/leagueTable`) 
     .subscribe(
     (data: any) => this.teamsStandingStore.showStandings(data.json()), 
     (error) => console.log(error) 
    ); 
    } 

} 

そして、これがTeamsStandingComponentテンプレートです：

<div class="teams-standing__table"> 
    <h2>{{leagueId}} - {{teams?._links?.competition?.href}}</h2> 
    <h3>{{teams?.leagueCaption}}</h3> 
    <div *ngFor="let team of teams?.standing"> 
    {{team.teamName}} 
    {{team.crestURI}} 
    </div> 
</div> 

そして最後に、これはあるTeamStandingStore：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Rx'; 

@Injectable() 
export class TeamsStandingStore { 

    private standings: Subject<any> = new Subject<any>(); 
    private showStands: Subject<any> = new Subject<any>(); 

    constructor() { 
    this.showStands 
     .subscribe(this.standings); 
    } 

    public showStandings(standings) { 
    this.showStands.next(standings); 
    } 

} 

私の問題は、これらのネストされたコンポーネント、TeamsStandingComponentは、すべてのコンポーネントが別のエンドポイント呼び出した場合でも、同じデータを示すことがある - ことができますようを参照してください。応答が異なります。

PS：私は、彼らがすべてのTeamStandingStoreの同じインスタンスを使用しているため、すべてのネストされたコンポーネントが同じ値を取得していると信じて@angular v.2.4.9とrxjs v.5.0.2

Answer 1

を使用しています。

あなたはTeamStandingStoreを提供している場所にあなたのモジュールを表示していませんが、それをあなたがモジュールレベルとして提供していると思います。これは、すべてのコンポーネントがStoreの同じインスタンスを取得していることを意味し、したがって、すべて同じコンポーネントをサブスクライブすることは、同じstandingsが観測可能であることを意味します。

この場合、モジュールレベルではなくコンポーネントレベルでストアを提供するので、各TeamStandingComponentには独自のインスタンスがあります。あなたは、このようなコンポーネントデコレータでTeamStandingStoreを提供することにより、これを行うだろう：

@Component({ 
    selector: 'teams-standing', 
    providers: [HttpClient, TeamStandingStore], // <- insert TeamStandingStore here 
    templateUrl: '../templates/teams-standing.html' 
}) 
export class TeamsStandingComponent implements AfterViewInit { 

    @Input() private teams: Object; 
    @Input() private leagueId: string; 
    private teamsStandingStore: TeamsStandingStore; 

    constructor(
    private TeamsStandingStore: TeamsStandingStore, 
    private ngzone: NgZone, 
    private cdref: ChangeDetectorRef 
) { 
    console.clear(); 
    this.teamsStandingStore = TeamsStandingStore; 
    }