鍍金池/ 問答/HTML5  HTML/ Anguar4中如何保持監(jiān)聽某一字段的值的變化。

Anguar4中如何保持監(jiān)聽某一字段的值的變化。

在使用angular4框架開發(fā)過程中,會(huì)遇到某些場(chǎng)景。
例如:公共組件中有一個(gè)全局下拉列表,每當(dāng)該下拉列表值改變,所有激活的子組件都要做出相應(yīng)改變。ng1時(shí)有$watch指令,但是在ng4中沒有找到類似方法。
目前采用的是生命周期的Docheck(),對(duì)性能消耗非常大,還有一些不可預(yù)期的問題,想請(qǐng)教有沒有更好的監(jiān)聽方法.

回答
編輯回答
別瞎鬧

你在哪里改的數(shù)據(jù),就在那里監(jiān)聽就好了啊
比如有這么一個(gè)服務(wù)

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

在組件里依賴注入這個(gè)服務(wù)

constructor(public customService:CustomService){}

然后在html模版就能直接使用服務(wù)里的屬性值做渲染了

<div>{{customService.customAttr}}</div>
2018年2月1日 15:33
編輯回答
舊螢火

結(jié)合Rxjs,下拉列表的值作為一個(gè)BehaviorSubject放到公用的service中,子組件模版上直接使用async pipe解析值。
例(公用組件的service):

import { BehaviorSubject } from 'rxjs/BehaviorSubject'
...
export XXXService{
    downData:BehaviorSubject<any[]> = new BehaviorSubject<[]>
    ...
}

每次修改下拉值只需(設(shè)注入service為xxxService):

xxxService.downData.next(更新的數(shù)據(jù))

所有的子組件引用服務(wù)后只需在模版使用async pipe便可自動(dòng)監(jiān)聽訂閱數(shù)據(jù)變化:
模版

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

也可以直接在組件中訂閱:

xxxService.downData.subscribe(data => {
    //監(jiān)聽到變化
    ...
})

注意service一定要保持單例

2017年6月10日 21:51