Question

我正在关注角度英雄教程。 heroes.component 如下所示。

export class HeroesComponent implements OnInit {

  heroes: Hero[];

  getHeroes(): void {
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes.slice(0, 5));
  }

  constructor(private heroService: HeroService) {
  }

  ngOnInit() {
    this.getHeroes();
  }

  add(name: string): void {
    name = name.trim();
    if(!name) { return; }
    this.heroService.addHero({ name } as Hero)
    .subscribe(hero => {
      this.heroes.push(hero);
    });
  }
}

dashboard.component 如下所示。

export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}

heroes.component.ts add方法有一个订阅回调将新创建的英雄推送到英雄数组中，以便 heroes.component.html 可以显示新创造的英雄。如果我不想在 heroes.component.html 中显示新创建的英雄，我将删除订阅回调方法。

但是，当我删除 heroes.component.ts 中的订阅回调方法时， dashboard.component.html 不会显示我新创建的英雄。

为什么 heroes.component.ts 需要使用subscribe方法来反映 dashboard.component.ts 中的更改？

他们的英雄财产是否以某种方式相关？

Answer 1

当您订阅一个observable时，它意味着它不会完成，但会始终不断更新新更新/删除/添加的值。

因此，您始终可以确保显示的值不是陈旧的。在这种意义上，可观察性和承诺不同，承诺将完成，但可观察将继续更新数据，直到组件未被销毁或未在该可观察对象上调用取消订阅。

希望有所帮助。

Angular Heroes教程heroes.component和dashboard.component

1 个答案: