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

Posted 2023-02-22

【中文标题】您应该在 Angular2 父/子组件层次结构中的哪个点订阅 observable？

【英文标题】：At what point in an Angular2 parent/child component hierarchy should you subscribe to an observable?

【发布时间】：2017-03-30 22:26:11

【问题描述】：

我有 18 条指令都在挑选父组件订阅的一个非常大的对象（不是 http）。我是否将属性分配给不同的指令，或者传递 observable 并让不同的组件仅订阅它们需要的属性会更好。

简而言之，我应该：

将 observable 传递给 angular2 指令并从指令组件中订阅

在父节点中订阅并将 observable 的结果数据传递给 angular2 指令。 （这是我目前实现的方式）

【参考方案1】：

Angular2 和组件树结构带来了一个你应该使用的模式：Dumb 和 Smart components。

Smart

组件可以注册到您想要的任何东西，并且其中包含一些

逻辑

对面的

Dumb

组件应该

仅用于显示带有一些数据的视图

（作为

Input

传递）李>

---

一个非常简单的例子是：

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 文件中订阅 observable，那么您可以使用 Angular2 中的 async 管道：

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

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