Question

在AngularJS中，可以$监视控制器中的变量，如果变量从任何地方（从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

查看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}`);
  }
}

Answer 2

与使用$watch无关。

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

Answer 3

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

观察组件变量Angular 5

3 个答案: