Отдельная директива Scope Angular2

Question

Я попытался рассмотреть некоторые подобные вопросы здесь, в SO, но не смог найти способ решить мою проблему.

Существует обратный отсчет @Directive(), который принимает пару входов и отсчет. Работа с подсчетом работает, за исключением того, что я сталкиваюсь с проблемой, когда все селекторы запускают/излучают одни и те же номера, прежде чем переходить к следующему обратному отсчету. Как я могу получить их по отдельному обратному отсчету с использованием собственных параметров и одновременным запуском?

Plunkr

пробег (код) в app.component.ts

run() { 
    var _this = this; 
    clearInterval(_this._timer); 
    var counting = 0; 
    var incrementFactor = 0; 
    var increment = 1; 

    if (!isNaN(_this._duration) && !isNaN(_this._step) && !isNaN(_this._countFrom) && !isNaN(_this._countTo)) { 
     counting = Math.round(_this._countFrom); 
     incrementFactor = Math.round(Math.abs(_this._countTo - _this._countFrom)/((_this._duration * 1000)/_this._step)); 
     increment  = (incrementFactor < 1) ? 1 : incrementFactor 

     _this.countToChange.emit(counting); 

     _this._timer = setInterval(function() { 
      if (_this._countTo < _this._countFrom) { 
       if (counting <= _this._countTo) { 
        clearInterval(_this._timer); 
        _this.countToChange.emit(_this._countTo); 
       } else { 
        _this.countToChange.emit(counting); 
        counting -= increment; 
       } 
      } 
     }, _this._step); 
    } 
} 

Answer 1

Проблема с вашим компонентом. Вы использовали ту же переменную «подсчет» для всех трех директив.

Это работает, если вы используете 3 различных переменный уровень компонент следующим образом:

Вот обновленная версия вашего шлепнуть https://plnkr.co/edit/PrwF8gYrl5AYCB0XcUsg?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <countDown [step]="100" [countFrom]="100" [countTo]=0 [duration]="2" (countToChange)="count1 = $event">{{ count1 }}</countDown> 
    <countDown [step]="100" [countFrom]="1000" [countTo]=0 [duration]="4" (countToChange)="count2 = $event">{{ count2 }}</countDown> 
    <countDown [step]="100" [countFrom]="10000" [countTo]=0 [duration]="20" (countToChange)="count3 = $event">{{ count3 }}</countDown> 
    `, 
    directives: [countDown] 
}) 
export class AppComponent { 
    public count1:number; 
    public count2:number; 
    public count3:number; 
}