Question

创建了一个名为running-number.componet.ts的组件，

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'running-number',
  templateUrl: './running-number.component.html',
  styleUrls: ['./running-number.component.css']
})
export class RunningNumberComponent implements OnInit {

  private currentValue:number = 0;

  constructor() { }

  @Input() numberForRunning:number;

  ngOnInit() {
      let obj = this;
      for (let i = 1; i <= obj.numberForRunning; i++ ) {
          setTimeout(() => {
              this.currentValue = this.currentValue + 1;
          }, 100);
      }
  }

}

并使用不同的numberForRunning输入值调用此组件4次。

<running-number numberForRunning="15645"></running-number>
<running-number numberForRunning="3543"></running-number>
<running-number numberForRunning="414"></running-number>
<running-number numberForRunning="987"></running-number>

问题是一旦numberForRunning =“15645”完成了。然后只启动numberForRunning =“3543”。我希望所有4个组件应该同时运行。请帮我解决这个问题。

提前致谢。

Answer 1

这里发生的是，当每个组件被初始化时，它的初始化程序将同步运行，直到它完成。虽然我们确实通过调用setTimeout来排队可以交错的更改，但我相信交错就是你在行为方面所做的事情，它实际上是同步发生的。在执行任何其他组件的初始化程序之前，每个组件实例实际上同步创建numberForRunning超时。这实际上扼杀了事件循环，使得结果难以观察。

我们实际上可以通过利用Promises来实现交错更新。在下面的示例中，我们利用Promises以及async / await来使某个组件的init循环中的每次迭代依赖于（字面上await）上一次迭代。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'running-number',
  template: '<div>{{currentValue}}</div>'
})
export class RunningNumberComponent implements OnInit {

  private currentValue = 0;

  @Input() numberForRunning: number;

  @Input() rateOfChange = 1;

  async ngOnInit() {
    const period = 1000 * this.rateOfChange;
    for (let i = 1; i <= this.numberForRunning; i++) {
      await delay(period);
      this.currentValue = this.currentValue + 1;
    }
  }

}

function delay(ms) {
  return new Promise(resolve => setTimeout(() => resolve(undefined), ms));
}

在这里，正在运行，https://plnkr.co/edit/9bnwr4wNQPbIergDTq1n?p=preview

这是有效的，因为它意味着初始化器实际上返回Promises，而Promises又会产生更多Promise。它不是同步地执行工作，而是交错的。因此，初始化以及随着时间推移而发生的后续操作实际上开始实际上是交错的。引入rateOfChange属性是为了让我们更容易看到这种情况。

我道歉，因为这有点挥手，但我希望它能解决潜在的问题并提供高水平的说明。

Angular 2相同的组件多次执行1 {1}

1 个答案: