观察组件变量Angular 5中的变化
在AngularJS中，可以在控制器中更改变量，如果变量从任何地方更改(从ng- $watch更改时从模板更改，或者从控制器以编程方式更改)，则此触发器将被激活。
我想知道在Angular 5中是否有可能实现同样的功能。
我必须能够直接从模板中更改变量，而无需调用任何函数，如下所示：
<button class="btn-link bc-2th" (click)="persistentComponentConfig.searchFiltersVisible = !persistentComponentConfig.searchFiltersVisible">
FILTERS
</button>但我也必须通过编程来更改它：
updateVariable () {
this.persistentComponentConfig.searchFiltersVisible = !this.persistentComponentConfig.searchFiltersVisible
}在这两种情况下(实际上有很多)，我必须在模型更改后触发另一个函数。
我可以通过创建一个反应式表单并订阅它的'valueChanges‘属性来做到这一点，但我不需要整个表单控制器，我只需要一些属性存储在一个组件对象中，以控制一些模板*ngIf/隐藏/显示指令，并将更改分派到我的ngrx存储。
我尝试使用Observables和BehaviorSubjects来创建它，但是需要更多的样板来通过'next()‘将所有更改传播到我的存储中。我只是在寻找一些与AngularJS的$watch功能相同的东西。
我怎么能做到呢？
谢谢!
回答 3
Stack Overflow用户
发布于 2020-04-12 04:55:43
您可以尝试在组件中使用变量的get和set函数。您的触发器应该在set函数中定义。
这样：
_searchFiltersVisible = null
get searchFiltersVisible() : string {
return this._searchFiltersVisible
}
set searchFiltersVisible(v: string) {
// trigger any action you want
// call another function, emit an event etc
this.anyEvent.emit(v)
this._searchFiltersVisible = v
}Stack Overflow用户
发布于 2018-04-10 04:44:05
看看lifecycle hooks，特别是OnChanges。
只要至少有一个数据属性更改了它的值，就会调用它。它由一个SimpleChanges对象调用，该对象包含更改后的属性及其值。
从文档中：
ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
}
}Stack Overflow用户
发布于 2018-04-10 04:44:50
与使用$watch没有任何相同之处。
一种常见的方法是在发出数据更改的类上使用getter和setter。您将不得不手动订阅每一个。
https://stackoverflow.com/questions/49741329
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号