typescript - ngrx/router を使用してロケーション変更時に Angular2 (rc.4) アニメーションを適用する方法

Question

免責事項 - 私はここで漠然としていてかなり高レベルであることを知っていることに注意してください.

私は Angular2 を学習しようとしています。リリース候補 3/4 で提供された新しいアニメーション API を本当に使用したいと思っています。ドキュメントはこちら: https://angular.io/docs/ts/latest/guide/animations.html

さて、それはすべて非常に簡単に思えますが、アプリケーションの URL を変更する (子ビューに移動する) ときに CSS トランジションを適用したいのですが、main.ts コンポーネントまたは任意のコンポーネントで場所の変更イベントをキャプチャする方法がわかりません。animationsプロパティを追加したい場所。ドキュメントで示されている例では、@triggerName構文を使用してアニメーションを適用または切り替えていますが、ページ遷移をアニメーション化する場合にこれが適用できるかどうかはわかりません。

これが私の場合main.html：

<my-app>
    <div class="nav">
        <a linkTo="/">Home</a>
        <a linkTo="/here">Here</a>
        <a linkTo="/there">There</a>
    </div>

    <div class="main">
        <!-- this is what I want to animate -->
        <route-view></route-view>
    </div>
</my-app>

そしてこれは私の中にありましたmain.ts

@Component({
    selector: 'my-app',
    directives: [  ],
    pipes: [ ],
    templateUrl: 'src/main.html',
    // I need to capture the location change and apply a css animation
    animations: [
    // Do I need a state for this????
        state('in', style({transform: 'translateX(0)'})),
            transition('void => *', [
                style({transform: 'translateX(-100%)'}),
                animate(100)
            ]),
            transition('* => void', [
                animate(100, style({transform: 'translateX(100%)'}))
            ])
  ])
    ]
})

@ngrx/router を使用していますが、これには LocationChange クラスが付属していることを知っています。アドバイスをよろしくお願いします... 良いチュートリアルへのリンクを知っていれば幸いです!

これは、AngularJS で達成しようとしている効果です: https://codepen.io/schonert/pen/InAzi