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：我正在使用@angular v.2.4.9和rxjs v.5.0.2

Answer 1

我相信所有嵌套组件都获得相同的值，因为它们都使用TeamStandingStore的相同实例。

您没有在提供TeamStandingStore的地方展示您的模块，但我猜您将其作为模块级别提供。这意味着每个组件都获得Store的相同实例，因此所有订阅都是相同的standings可观察对象。

在这种情况下，您可能想要做的是在组件级别而不是在模块级别提供Store，因此每个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;
  }

Angular2 - 一个商店，多个组件，不同的API调用

1 个答案: