Angular4 | Routetransitions - FadeIn/FadeOut

Question

我正在尝试在Angular 4.0.1的每个路径转换中进行淡入/淡出。我已经看到无数的“滑入/滑出”教程，但这些对我来说并不合适。

这是我app.component

组件：

@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'} 
}) 

HTML：

<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是可变的，组件负载的变化？

应用程序中的所有路由都由自定义路由服务（Router的包装器）处理，每次发生URL更改时都可以向app.component发送广播，并使用延迟路由（时间：离开过渡）？

我可以指定我要在我的app-routing.module中使用动画的位置吗？

有谁知道这应该如何工作？或者在角度为4.0.1的复杂路由（儿童和不使用路由器连接）中有一个工作示例

Answer 1

通过使用广播来更改routeAnimation触发器来解决此问题。

它仍然觉得有点hackish，我认为有一个更好的办法。如果有人有更好的主意，请告诉我！

触发：

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= ...不起作用。