angular - ページのロード/アンロード時にページにフェードイン/アウト効果を実装するにはどうすればよいですか?

Question

基本的なアニメーション部分が接続されていると思います。処理するイベントを知る必要があるだけです。理想的には、すべてのコンポーネントをラップできるようにナビゲーション レベルで使用できるソリューションが必要ですが、ページの読み込みの簡単な例で十分であり、非常に高く評価されます。関連するSOに関する他のいくつかの質問を見つけましたが、それらは私の特定の質問に答えていないか、古くなっているようです:

ルーティングされたコンポーネントの Angular 2 の「スライド イン アニメーション」 Angular 2.0 ルーターとコンポーネント インターフェイスの約束によるページ遷移アニメーション

これが私がこれまでに持っているものです：

htmlファイル

<article @heroState="componentState">
           <p>article element should fade in/out</p>
</article>

成分

@Component({
    selector: 'blog-about',
    templateUrl: './app/about/about.html',
    animations: [
        trigger('heroState', [
            state('active', style({
                backgroundColor: 'blue',
                transform: 'scale(1)'
            })),
            state('inactive', style({
                backgroundColor: 'green',
                transform: 'scale(1.1)'
            })),
            transition('active => inactive', animate('1000ms ease-in')),
            transition('inactive => active', animate('1000ms ease-out'))
        ])
    ]
})
export class About implements OnInit, OnDestroy {
    public componentState: string;
    public Title: string

    constructor() {
        this.Title = "this is about";
    }

    ngOnInit()
    {
        this.componentState = 'inactive';
    }

    ngOnDestroy()
    {

    }
}