组件的多个set @set()值

Question

我不明白在什么行为中不能为组件设置@ set ()值多次。

例如，我有一个组件

export class AComponent {

  private _value: string;

  @Input()
  set value(v: string) {
    console.log(`set value : ${v}`);
    this._value = v;
  }

  get value() {
    return this._value;
  }
}

在另一个组件中，我尝试设置多次值。

ngOnInit() {
    this.value = "1";
    this.value = "2";
}

但它只影响最后一个值(在控制台上，我只看到- set值: 2)。

但是如果我使用setTimeout函数，它就能正常工作(我在控制台上看到了两个值)。

ngOnInit() {
    this.setValue("1 timeout");
    this.setValue("2 timeout");
  }

  setValue(v: string) {
    setTimeout(() => {
      this.value = v;
    }, 0);
  }

为什么我需要这种行为？因为我想在对服务器的请求之前和之后设置一个进度自旋器，从而禁用进度自旋器。

  toClick(event) {

    // set value before request to server
    // for example to set a progress spinner
    this.value = "1";

    // some async request to server - you get a Promise or an Observable

    // set value after request in .then( ) or in subscribe( )
    // for example to disable a progress spinner
    this.value = "2";

  }

有人能解释一下这种行为吗？

演示

Answer 1

order使用ChangeDetection System来检测更改并将其反映在受影响的视图和组件上，据我所知，更改检测是在每个异步任务之后触发的，包括：

1. setTimeout和setInterval.
2. 对服务器的Http请求。
3. Dom事件(单击，input...etc)。

一旦此异步任务完成，它将检查以前的属性值和当前值。在您的示例中，当您单击某个位置并触发toClick方法时，它将等待方法执行结束并触发changeDetection，因此它将考虑变量"2“的最终值。

如果您在您的setTimeout toClick方法中运行它的新异步任务，那么我们有两轮ChangeDetection系统，每一轮都将反映对两个值"1“和"2”的更改。