可变变化检测 - Angular

Question

我是 Angular 的新手，我主要使用 VueJS。我想知道如何检测变量何时更新。我正在通过 DataService 更新我的变量。我阅读了有关 ngOnChanges() 的信息，但我发现这仅适用于输入。

这几乎是我的代码：

import { DataService } from "../../service/my.service";

export class MainPage {
  myVar: String = ""; // this is the variable I want to listen when a change is made

   constructor (
    private data: DataService
   ) {}

   ngOnInit() {
    this.data.changeVar.subscribe(message => this.myVar = message);
  }
}

我的服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject<string>("");
  changeVar = this.messageSource.asObservable();

  constructor() { }

  changeMyVar (message: string) {
    this.messageSource.next(message)
  }

}

这是我更新变量的地方。

import { DataService } from "../../service/my.service";

export class AnotherPage {
  anotherVar: String = '';

  constructor(
    private data: DataService
  ) { }

  ngOnInit() {
    this.data.changeVar.subscribe(message => this.anotherVar = message)
  }

  myFunction () {
    this.data.changeMyVar("Hello"); // update variable to "Hello"
  }
}

非常感谢任何帮助！ :)

Answer 1

如果myVar只在ngOnInit中定义的Observable回调中改变，则可以在改变变量后调用方法：

export class MainPage {

    myVar: string = "";

    ngOnInit() {
        this.data.changeVar.subscribe(message => {
            if (message !== this.myVar) {
                this.myVar = message;
                this.doSomething();
            }
        });
    }

    private doSomething() {
        ...
    }
}

另一方面，如果myVar可以在其他地方更改（因为它是公共的），您可以在getter/setter中访问它，并在setter中调用方法：

export class MainPage {

    private _myVar: string = "";

    get myVar(): string {
        return this._myVar;
    }
    set myVar(value: string) {
        if (value !== this._myVar) {
            this._myVar = value;
            this.doSomething();
        }
    }

    ngOnInit() {
        this.data.changeVar.subscribe(message => this.myVar = message);
    }

    private doSomething() {
        ...
    }
}

Answer 2

你可以试试这个： https://angular.io/api/core/OnChanges

并通过以下方式获取对象更改： 更改.objectName

有关 angular.io 页面的更多详细信息。