Angular 2+ 检测对象 属性 服务内部变化

Question

假设我们有这样的服务：

SupermanService {
  private _superman: Hero;
  public supermanReplaced = new EventEmitter<Hero>();
  public supermanPropertyUpdated = new EventEmitter<Hero>();

  public get superman(): Hero {
    return this._superman;
  }

  public set superman(superman): void {
    this._superman = superman;
    this.supermanReplaced.emit(superman);
  }

  public updateSupermanProperty(key: string, val: string | number): Hero {
    this._superman[key] = val;
    this.supermanPropertyUpdated.emit(superman);
    return this._superman;
  }

}

有没有什么方法可以在不使用 updateSupermanProperty() 函数的情况下检测 supermanPropertyUpdated，而是通过例如设置 this.superman.power = 10?

我发现一些帖子建议将 与 DoCheck 挂钩结合使用，但这不适用于服务。

Answer 1

您可以使用get/set方法。

在你的例子中：

class SupermanService {
  private _superman: Hero;
  public supermanReplaced = new EventEmitter<Hero>();
  public supermanPropertyUpdated = new EventEmitter<Hero>();

  public set power(level: integer) {
    this._superman.power = level;
    this._supermanPropertyUpdated.emit(this._superman);
  }

  public get superman(): Hero {
    return this._superman;
  }

  public set superman(superman: Hero): void {
    this._superman = superman;
    this.supermanReplaced.emit(superman);
  }

  public updateSupermanProperty(key: string, val: string | number): Hero {
    this._superman[key] = val;
    this._supermanPropertyUpdated.emit(superman);
    return this._superman;
  }

}

之后你可以使用：

SupermanService.power = 10;

所有听众都会收到通知

更新

解决这个问题的另一个实现是修改你的 Hero class 添加一个 public EventEmitter 属性 并从您的服务订阅这个。为你的 Hero class 上的每个 属性 分配一个 setter 并发出像 Output 这样的变化并在您的服务可以发出更改。

class Hero {

    public onPropertyChange = new EventEmitter<Hero>();
    private _name: string;

    get name(): string {
        return this._name;
    }

    set name(value: string) {
        this._name = value;
        this.onPropertyChange.emit(this);
    }
}

class SupermanService {
  private _superman: Hero;
  public supermanReplaced = new EventEmitter<Hero>();

  public get superman(): Hero {
    return this._superman;
  }

  public set superman(superman: Hero): void {
    this._superman = superman;
    this.supermanReplaced.emit(superman);
  }

  public get supermanPropertyUpdated(): EventEmitter<Hero> {
    return this._superman.onPropertyChange;
  }
}