在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')) 
]);