Separate Directive Scope Angular2

Question

나는 비슷한 질문을 여기에서 시도했지만 내 문제를 해결할 방법을 찾지 못했습니다.

몇 개의 입력을 받고 카운트 다운하는 카운트 다운 @ Directive()가 있습니다. 모든 셀렉터가 실행 중이거나 다음 카운트 다운으로 넘어 가기 전에 동일한 숫자가 나오는 문제를 제외하면 카운팅 다운 부분이 작동합니다. 자체 매개 변수를 사용하여 동시에 카운트 다운하여 개별적으로 카운트 다운하도록하려면 어떻게해야합니까? app.component.ts에서

Plunkr

실행() 코드는

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

문제는 당신의 구성 요소입니다. 세 가지 지시어 모두에 대해 'counting'변수를 사용했습니다.

다음

이 쿵하는 소리 난 그냥 derped 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; 
}