角2分相同部件多次通過1

創建名爲磨合number.componet.ts部件執行1，角2分相同部件多次通過1

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); 
     } 
    } 

}

和調用該組件4次不同numberForRunning輸入值。

<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個組件應該同時運行。請幫我解決這個問題。

在此先感謝。

來源

2017-03-21 sameer

我看到預期的非確定性行爲。這不是交錯操作的可靠方法。 –

這個運行組件應該做什麼？我認爲你正在試圖實現一個組件，該組件有一個計數器，該計數器每100毫秒輸出一個目標數字。但是你的實現絕對不會這樣做......你正在創建一堆超時，它們都被設置爲同時觸發（從現在起200毫秒）。 – snorkpete

你想達到什麼目的？也發佈你的模板代碼。 –

這裏發生的事情是，當每個組件被初始化時，其初始化程序會同步運行直到它完成。雖然我們通過調用setTimeout確實排隊進行可以交錯的更改，但我相信交錯是行爲明智之後的事情，但它實際上是同步發生的。每個組件實例實際上是在任何其他組件的初始化程序執行之前立即同步創建numberForRunning超時。這實際上扼殺了事件循環，使得結果難以觀察。

我們實際上可以通過利用Promise實現交織更新。在下面的例子中，我們利用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

這工作，因爲這意味着初始化實際回報的承諾而這又招致更多的承諾。它不是同步執行他們的工作它是交錯的。因此，隨着時間的推移而發生的初始化和隨後的操作實際上開始實際上是交錯的。引入rateOfChange屬性可以讓我們更容易地看到這種情況。

我很抱歉，因爲這有些手搖，但我希望它能夠獲得潛在的問題並提供高層次的插圖。

來源

2017-03-21 06:03:21

感謝您的支持。工作正常。 – sameer

角2分相同部件多次通過1

回答

相關問題