Angular 2相同的組件多次執行1

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又會產生更多Promises。 而不是同步執行他們的工作，而是交錯進行。 因此，初始化和隨后因啟動過程而隨時間發生的后續操作實際上會相互交錯。 引入了rateOfChange屬性，使我們可以更輕松地看到這種情況。

我很抱歉，因為這有點費勁，但我希望它能解決潛在的問題並提供一個高水平的說明。