在Angular2父/子组件层次结构中的哪个位置，您应该订阅一个observable？

Question

我有18条指令将所有父组件订阅的非常大的对象分开（而不是http）。我是否将属性分配给不同的指令，或者更好的方法是传递observable并让不同的组件只订阅 所需的属性。

简而言之，我应该：

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

2. 在父级中订阅并将结果的observable数据传递给angular2指令。 （这就是我目前实施的方式）

Answer 1

使用Angular2和组件树结构时，您应该使用一种模式： Dumb 和智能组件。

• 智能组件可以注册到您想要的任何内容并且其中包含逻辑
• 相反的 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文件中订阅您的o​​bservable，那么您可以使用Angular2中的异步管道：

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

重要的是PersonComponent不会（在第一个和第二个解决方案中）都没有收到Observable。它只是一个愚蠢的组件，必须在需要时显示数据（当observable从服务器接收至少一个响应时）。