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一定要保持单例

Answer 2

你在哪里改的数据，就在那里监听就好了啊
比如有这么一个服务

@Injectable()
class CustomService{
    public customAttr:number=0;
    constructor(){
        setInterval(()=>this.customAttr=Math.random(),1000);
    }
}

在组件里依赖注入这个服务

constructor(public customService:CustomService){}

然后在html模版就能直接使用服务里的属性值做渲染了

<div>{{customService.customAttr}}</div>