Angular2とReactiveでCSSアニマートの終わりを聞く方法

Question

Angular2アプリでページ遷移を手動で実行したいと思います。私がこれまで行ってきたことは、ナビゲーションを扱うComponentから呼び出すサービスです。リンクをクリックするかアイコンか何かを呼び出すと、AnimationService goToメソッドと呼ばれます。これはURLを受け取り、Observableストリーム/サブジェクトにプッシュします。ここでは、これまでのサービスは以下のとおりです。

@Injectable() 
export class AnimationService { 
    // should you be a directive? 
    animationStream: Subject<string> = new Subject<string>(); 
    animationStreamEnd:Subject<string> = new Subject<string>() 

    constructor() { 

     // this is to listen for when it is time to navigate to whereever? 
     this.animationStreamEnd.subscribe(resp => { 
      // redirect the url/app here 
      this.router.go(resp); 
     }); 

    } 

    goTo(url:string): void { 
     // so, broadcast down to trigger the css animation... 
     this.animationStream.next(url); 
    } 

} 

私はアニメーション化したいコンテンツがそれでngClass条件は、それがこの

<div class="gridClass" [ngClass]="{'animate-left': applyTransitionClass}"> 
    <div class="gridRow"> 
     <route-view></route-view> 
     </div> 
    </div> 
</div> 

ようになりますし、それに、そう[ngClass]="{'animate-left': applyTransitionClass}"のようなHTMLテンプレートのコンポーネントIのしています私が観察し、どのように私は、CSSアニメーションをトリガー値を変更するに加入どこあなたが見ることができ、次のコード

export class AnotherComponent { 

    constructor(private animationService: AnimationService) { 
      public applyTransitionClass: boolean = false; 

     this.animationService.animationStream.subscribe(resp => { 
      // resp is a url... 
      // apply a css class... when that is done we need to broadcast the thing is done... 
      this.applyTransitionClass = true; 
      // here I want to listen for when the animation end (it is only 1 second) and tell the animationService to now navigate to wherever 
      this.animationService.animationStreamEnd.next(resp); 
     }); 
    } 

を持っています。今度はコンポーネント内で、私がちょうどトリガーしたCSSクラスの終わりを聞きたいのですが、AnimationServiceに、これがアニメーションストリームにプッシュすることによって起こったことを知らせてください。しかし、私はアニメーション終了イベント（例えば、"transitionend","oTransitionEnd","transitionend","webkitTransitionEnd"のようなもの）を取得する方法を知らない。私はちょうど1秒遅れを設定することができますが、Observablesを使用したいと思います。

私は自分自身についてよく説明していないことを知っています。要件を明確にするために必要な場合は、問題を修正します。前もって感謝します。

Answer 1

これは、私はそれをやっている方法です：

 //this.isIn = false; 
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'addEventListener', ['animationend', (e) => { 
     console.log(e); 
    }]); 
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'addEventListener', ['transitionend', (e) => { 
     console.log(e); 
    }]); 

Answer 2

Angular2アニメーションモジュールはちょうど2.0.0最終の前に実装されたコールバックを得ました。

https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

template: ` 
    <ul> 
    <li *ngFor="let hero of heroes" 
     (@flyInOut.start)="animationStarted($event)" 
     (@flyInOut.done)="animationDone($event)" 
     [@flyInOut]="'in'"> 
     {{hero.name}} 
    </li> 
    </ul> 
`, 

Answer 3

コンポーネントビュー：

<div (transitionend)="transitionEnd($event)"> 
    ... 
</div> 

部品コード：

transitionEnd(e: Event){ 
    alert('no way, that easy?'); 
    }