Question

我不了解无法设置@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";
}

但是它仅影响最后一个值（在控制台上，我仅看到-设置值：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";

  }

有人可以解释这种行为吗？

DEMO

Answer 1

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

setTimeout和setInterval。
对服务器的Http请求。
Dom事件（单击，输入...等）。

此异步任务完成后，它将检查属性的先前值和当前值。在您的示例中，当您单击某处并触发 toClick 方法时，它将等待该方法执行结束并触发changeDetection，因此它将考虑变量的最终值为“ 2”。

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

组件的多个set @Input（）值

1 个答案: