Anguar4中如何保持监听某一字段的值的变化。

Question

在使用angular4框架开发过程中,会遇到某些场景。例如：公共组件中有一个全局下拉列表,每当该下拉列表值改变,所有激活的子组件都要做出相应改变。ng1时有$watch指令,但是在ng4中没有找到类似方法。目前采用的是生命周期的Docheck(),对性能消耗非常大,还有一些不可预期的问题,想请教有没有更好的监听方法.

Answer 1

结合Rxjs，下拉列表的值作为一个BehaviorSubject放到公用的service中，子组件模版上直接使用async pipe解析值。

例（公用组件的service）：

import { BehaviorSubject } from 'rxjs/BehaviorSubject'

...

export XXXService{

    downData:BehaviorSubject<any[]> = new BehaviorSubject<[]>

    ...

}

每次修改下拉值只需（设注入service为xxxService）：

xxxService.downData.next(更新的数据)

所有的子组件引用服务后只需在模版使用async pipe便可自动监听订阅数据变化：

模版

<div *ngFor="let item of (xxxService.downData | async)"></div>

也可以直接在组件中订阅：

xxxService.downData.subscribe(data => {

    //监听到变化

    ...

})

注意service一定要保持单例