在Angular2，如何可以动画，其在辅助路线加载的组件？

Question

我有在名为/辅助路线加载的侧栏的组成部分。这工作正常。

另外，我有在该组分中的元数据的一些动画设置，用于在效果的幻灯片。这部动画也能正常工作，当我点击一个按钮，当加载该组件“正常”，例如。

然而，当我在一个辅助的路线加入这种成分，动画不会触发。该组件即刻呈现。

为什么？我怎样才能解决这个问题？见下面的代码。

sidebar.component.ts

import { Component } from '@angular/core'; 
    import { ActivatedRoute } from '@angular/router'; 

    @Component({ 
     selector: 'sidebar', 
     templateUrl: 'sidebar.component.html', 
     styleUrls: ['sidebar.component.scss'], 
     animations: [trigger('slideIn', [ 
     state('false', style({ 
      width: '0' 
     })), 
     state('true', style({ 
      width: '18.75rem' 
     })), 
     transition('0 => 1', animate('300ms ease-in')), 
     transition('1 => 0', animate('300ms ease-out')) 
     ])] 
    }) 
    export class SidebarComponent { 
     shouldAnimate: boolean; 

     constructor(private route: ActivatedRoute){ 
     if (this.route.outlet === 'sidebar') { 
      this.shouldAnimate = true; // Yes, I do enter here every time 
     } 
     } 
    } 

从app.routes.ts sidebar.component.html

<div id="sidebar" 
    [@slideIn]="shouldAnimate"> 
</div> 

{ path: 'profile', outlet: 'sidebar', component: SidebarComponent } 

从app.component.ts

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

Answer 1

我想通了自己。事实证明，当你加载一个组成部分，它具有第一状态是void，这需要在该组件的元数据的一部分animations:正确配置。

所以我添加一个新的状态，这是void并且还增加了一个过渡，从空隙1.

基本上我改变这样的：

trigger('isVisibleChanged', [ 
    state('false', style({ 
    width: '0' 
    })), 
    state('true', style({ 
    width: '18.75rem' 
    })), 
    transition('0 => 1', animate('300ms ease-in')), 
    transition('1 => 0', animate('300ms ease-out')) 
]); 

这样：

trigger('isVisibleChanged', [ 
    state('void', style({ 
    width: '0' 
    })), 
    state('false', style({ 
    width: '0' 
    })), 
    state('true', style({ 
    width: '18.75rem' 
    })), 
    transition('0 => 1', animate('300ms ease-in')), 
    transition('1 => 0', animate('300ms ease-out')), 
    transition('void => 1', animate('300ms ease-in')) 
]);