使用 Observable / Events 进行组件间通信

Question

设置：

• 父组件有一个过滤器值列表（小、中、大）
• 子组件具有应根据父组件中选择的值过滤的项目列表

是否可以让父组件暴露 Observable，子组件订阅它？

我不清楚，使用 [filter]="Observable"，在什么时候订阅。

父组件.ts文件：

...
@Output filterObservable: Observable<string>;
...

在父组件 HMTL 模板中：

...
<child-component [filter]="filterObservable" />
...

子组件ts文件：

@Input filter: Observable<string>;

在某些时候，子组件需要订阅（进行此调用）

this.filter.subscribe(msg => console.log(msg));

哪个生命周期事件适合进行Observable 订阅？ 我是否必须在每个 ngOnChanged 事件中检查过滤器值是否不同并再次取消订阅/订阅（或调用开关操作）？

Answer 1

答案：

父组件.ts文件：

...
@Output filterObservable: Observable<string>;
...

在父组件 HMTL 模板中：

...
<child-component [filter]="filterObservable | async" />
...

子组件ts文件：

@Input filter: string | null;