Angular4 | Route Transitions - FadeIn/FadeOut

Question

Angular 4.0.1のすべてのルートトランジションでフェードイン/フェードアウトを実行しようとしています。私は無数の「スライドイン/スライドアウト」チュートリアルを見てきましたが、それらは私のために働いていません。

これは私のapp.component

コンポーネントである：上記のコードは動作しません

<notification></notification> 
<div class="page-wrapper"> 
    <login-register></login-register> 

    <app-header></app-header> 

    <sub-header></sub-header> 

    <router-outlet></router-outlet> 
    <router-outlet name="popup"></router-outlet> 

    <app-footer></app-footer> 
</div> 

、@RouterAnimationは変数でなければなりませんと：HTML

@Component({ 
    selector: 'app', 
    templateUrl: 'app.component.html', 
    animations: [trigger('RouterAnimation', [ 
     state('void', style({opacity:0})), 
     state('*', style({opacity:1})), 
     transition(':enter', [ 
      style({opacity: 0}), 
      animate(2000, style({opacity: 1})), 
     ]), 
     transition(':leave', [ 
      style({opacity: 1}), 
      animate(1000, style({opacity: 0})), 
     ]) 
    ])], 
    host: {'[@RouterAnimation]': 'true'} 
}) 

コンポーネント負荷の変更？

アプリ内のすべてのルーティングはカスタムルーティングサービス（ルータのラッパー）によって処理されますが、URL変更が発生するたびにapp.componentにブロードキャストを送信できます。移行を離れる）？

私のapp-routing.moduleでアニメーションを使用する場所を指定できますか？

これはどのように動作するのでしょうか？または、複雑なルート（子とルータリンクを使用していない）と角度4.0.1の実例を持ってください。

Answer 1

これを解決するには、ブロードキャストを使ってrouteAnimationトリガーを変更してください。

これはまだ少しハッキリしているように感じています。より良い方法があると思います。誰かが良いアイデアを持っている場合は、私に教えてください！

トリガー：

trigger('RouterAnimation', [ 
    state('void', style({opacity: 0})), 
    state('*', style({opacity: 1})), 
    transition('empty -> animate', [ 
     animate(500, style({opacity: 1})), 
    ]), 
    transition(':enter', [ 
     animate(500, style({opacity: 1})), 
    ]), 
    transition('animate -> empty', [ 
     animate(500, style({opacity: 0})), 
    ]), 
    transition(':leave', [ 
     animate(500, style({opacity: 0})), 
    ]) 
] 

app.component.html：

<div style="opacity: 0" [@RouterAnimation]="animate" (@RouterAnimation.done)="animationDone($event)"> 
    <div class="page-wrapper"> 
     <login-register></login-register> 

     <app-header></app-header> 

     <sub-header></sub-header> 

     <router-outlet></router-outlet> 
     <router-outlet name="popup"></router-outlet> 

     <app-footer></app-footer> 
    </div> 
</div> 

app.component.ts：

this.broadcastService.on('animateStart').subscribe(() => { 
     this.animate = "empty"; 
    }); 
    this.broadcastService.on('animateStop').subscribe(() => { 
     this.animate = "animate"; 
    }); 

router.service.ts

this.broadcastService.broadcast('animateStart'); 
    setTimeout(() => { 
     this.broadcastService.broadcast('animateStop'); 
     this.router.navigate(this.currentUrl); 
    }, 500) 

カスタムルータサービスを使用している場合でも、routerLink= ...は機能しません。