在 Angular2 parent/child 组件层次结构中的什么时候你应该订阅一个可观察对象?
At what point in an Angular2 parent/child component hierarchy should you subscribe to an observable?
我有 18 个指令,所有指令都选择了父组件订阅的一个非常大的对象(不是 http)。我是将属性分发给不同的指令,还是传递可观察对象并让不同的组件订阅仅他们需要的属性会更好。
简而言之,我应该:
将 observable 传递给 angular2 指令并从指令组件内订阅
订阅父级并将可观察的结果数据传递给angular2指令。 (这就是我目前的实现方式)
随着 Angular2 和组件树结构的出现,您应该使用一种模式:Dumb 和 Smart 组件.
- 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。它只是一个必须在需要时显示数据的哑组件(当可观察对象从服务器接收到至少一个响应时)。
我有 18 个指令,所有指令都选择了父组件订阅的一个非常大的对象(不是 http)。我是将属性分发给不同的指令,还是传递可观察对象并让不同的组件订阅仅他们需要的属性会更好。
简而言之,我应该:
将 observable 传递给 angular2 指令并从指令组件内订阅
订阅父级并将可观察的结果数据传递给angular2指令。 (这就是我目前的实现方式)
随着 Angular2 和组件树结构的出现,您应该使用一种模式:Dumb 和 Smart 组件.
- 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。它只是一个必须在需要时显示数据的哑组件(当可观察对象从服务器接收到至少一个响应时)。