在 Angular2 parent/child 组件层次结构中的什么时候你应该订阅一个可观察对象?

At what point in an Angular2 parent/child component hierarchy should you subscribe to an observable?

我有 18 个指令,所有指令都选择了父组件订阅的一个非常大的对象(不是 http)。我是将属性分发给不同的指令,还是传递可观察对象并让不同的组件订阅他们需要的属性会更好。

简而言之,我应该:

  1. 将 observable 传递给 angular2 指令并从指令组件内订阅

  2. 订阅父级并将可观察的结果数据传递给angular2指令。 (这就是我目前的实现方式)

随着 Angular2 和组件树结构的出现,您应该使用一种模式:DumbSmart 组件.

  • Smart 组件可以注册到任何你想要的东西,并且里面有一些逻辑
  • 对面的 Dumb 组件应该用于 仅用于显示带有一些数据的视图 (传递为 输入)

一个非常简单的例子是:

PersonComponent : 哑组件应该显示一个人(比如姓名和年龄)

  <div>
    Hi, my name is {{person.name}} and I'm {{person.age}} years old !
  </div>

PeopleComponent : 调用 PeopleService 获取用户列表的智能组件。然后它订阅响应(这是一个 Observable)。他的视图应该显示这样的人的列表:

  <person *ngFor="let p of people" [person]="p"></person>

假设您甚至不需要在 TS 文件中订阅您的可观察对象,那么您可以使用 Angular2 中的 async 管道:

<person *ngFor="let p of (people | async)" [person]="p"></person>

重要的是 PersonComponent 不会接收(无论是在第一个还是第二个解决方案中)Observable。它只是一个必须在需要时显示数据的哑组件(当可观察对象从服务器接收到至少一个响应时)。