アンギュラ4 - 、経路変更のビューでフェード使用して、角度のアニメーション

Question

質問： - ：

現在、ビューがフェードイン アンギュラ4

は問題が角アニメーション

を使用して、経路変更のビューでフェードウェブサイトのオンロードではなく、ルートが変更されたときではありません。 私は、ルート変更時にも常にビューがフェードインしたいと思っています。

これは私のHTMLである：（おそらく問題は???こちら）

<div class="page" [@fadeInTransition]> 
    <router-outlet></router-outlet> 
    </div> 

これは私のアプリのコンポーネントです：

import { Component, HostBinding } from "@angular/core"; 
import { Router, ActivatedRoute } from "@angular/router"; 
import { MetadataService } from 'ng2-metadata/index'; 

import { fadeAnimation } from "./animations/fade.animation"; 

@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    animations: [fadeAnimation()] 
}) 

export class AppComponent { 
    @HostBinding('@fadeInTransition') fadeInTransition; 

    constructor(private route: ActivatedRoute, private router: Router, private metadataService: MetadataService) { 
    } 
} 

これは私のアニメーションです（私はインポートする）：

import { trigger, state, animate, transition, style } from '@angular/animations'; 

export function fadeInAnimation() { 
    return trigger('fadeInTransition', [ 
     transition(':enter', [ 
      style({ opacity: 0 }), 
      animate('2s', style({ opacity: 1 })) 
     ]) 
    ]); 
} 

Answer 1

これはDRYではなく、..すべてのコンポーネントの動作に以下を追加します。

import { fadeAnimation } from "./animations/fade.animation"; 

@Component({ 
    selector: "app-some-other-component",  
    animations: [fadeAnimation()] 
}) 

@HostBinding('@fadeInTransition') fadeInTransition;