Angular 中属性的变化检测

Question

在 app.component.ts 中，我有一个名为 current 的属性。

export class appComponent {
  current = 0;
}

在我的一些方法中我改变了这个属性

previous() {
  this.current -= 1
}
next() {
  this.current += 1
}

现在，我想在当前属性更改时运行一组命令。我可以通过在更改后附加这些命令来完成此操作。

previous() {
  this.current -= 1;
  this.runCommands();

}
next() {
  this.current += 1;
  this.runCommands();
}

一切都很好。但是看吧，每次这个属性改变时调用这个方法似乎很混乱。我想要执行的操作是运行更改检测功能，运行我的命令，例如：

this.current.valueChanges.subscribe(() => this.runCommand());

有可能用更简单的角度方式吗？

提前致谢

Answer 1

您可能想要创建current一个Observablevia a BehaviorSubject。理想情况下，这些将存在于可注入服务中，然后依赖于 的值的组件current将通过注入的服务进行订阅。

设置Observable看起来像

   private _current = new BehaviorSubject<number>(0);
   public readonly current = this._current.asObservable();

然后我们可以订阅需要喜欢的组件（在本例中是它所在的组件）中的 current

   this.current.subscribe(val => {
        // do stuff here
    })

任何时候我们希望更改订阅的值current并触发该事件，我们都会这样做

    this._current.next(123);  // anything subscribed receives the value of 123

您可以在组件中执行此操作，但最佳实践是将其放在Observable服务层中。

为了实现您想要的将值增加 1 或 -1 的用例，该BehaviorSubject函数getValue()将通过告诉您存储在Observable.

    this._current.next(++this._current.getValue()) // increment 1
    this._current.next(--this._current.getValue()) // increment -1
    // etc...