观察组件变量 Angular 5 的变化

Question

在AngularJS中，可以在控制器中$watch变量，如果变量从任何地方更改(ng-model更改时从模板更改或以编程方式从控制器更改)，则激活此触发器。

我想知道是否有可能在 Angular 5 中完成相同的功能。

我必须能够直接从我的模板更改我的变量，而无需调用任何函数，如下所示：

<button class="btn-link bc-2th" (click)="persistentComponentConfig.searchFiltersVisible = !persistentComponentConfig.searchFiltersVisible">
FILTERS
</button>

但我也必须以编程方式更改它：

updateVariable () {
this.persistentComponentConfig.searchFiltersVisible = !this.persistentComponentConfig.searchFiltersVisible
}

在这两种情况下(实际上有很多)，我必须在模型更改后触发另一个函数。

我能够通过创建一个反应式表单并订阅它的"valueChanges"属性来做到这一点，但我不需要整个表单控制器，我只需要将一些属性存储在组件对象中以控制一些模板 *ngIf/hide/show 指令并将更改调度到我的ngrx存储。

我尝试使用Observables和BehaviorSubjects创建它，但是需要更多的样板文件来通过"next()"将所有更改传播到我的商店。我只是在寻找与AngularJS的$watch功能相同的东西。

我该怎么做？

谢谢！

Answer 1

看看生命周期钩子，尤其是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}`);
}
}

Answer 2

您可以尝试在组件中使用变量的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
}

Answer 3

与使用$watch没有什么相同的。

一种常见的方法是在发出数据更改的类上使用 getter 和 setter。您必须手动订阅每个。