Angular 组件的多个set@Input（）值

我不理解无法设置@Input（）值的行为 对一个组件执行多次

例如，我有一个组件

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-value:2）

但是如果我使用setTimeout函数，它会正常工作（我在控制台上看到两个值）

为什么我需要这种行为？ 因为我想在向服务器发送请求之前设置一个进度微调器 然后禁用进度微调器

  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";

  }

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

---

Angular使用变更检测系统来检测变更并将其反映在受影响的视图和组件上，据我所知，变更检测在每个异步任务后触发，包括：

设置超时和设置间隔

对服务器的Http请求

Dom事件（单击、输入…等）

一旦此异步任务完成，它将检查以前的属性值和当前值。在你的例子中，当你点击某个地方并触发<强> ToCalks>方法时，它等待直到方法执行结束并触发转换检测，所以它将考虑变量的最终值，即“2”。

---

如果在toClick方法中运行setTimeout，这是它的新异步任务，因此我们有两轮ChangeDetection系统，每轮将反映两个值“1”和“2”的更改。

这是有意义的。谢谢你的解释。

  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";

  }