在Angular2中，如何设置加载到辅助管线中的组件的动画？

我有一个侧栏组件，加载在命名/辅助路由中。这个很好用

此外，我在这个组件元数据中设置了一些动画，用于创建一张幻灯片。当我“正常”加载此组件时，例如单击按钮时，此动画也可以正常工作

但是，当我在辅助管线中添加此组件时，动画不会触发。组件会立即渲染

为什么?？我怎样才能解决这个问题？请参阅下面的代码

侧栏.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
         }
      }
    }

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

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

侧栏.component.html

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

来自app.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
         }
      }
    }

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

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

---

我自己想出来的。事实证明，在加载组件时，它的第一个状态是

void

，这需要在组件元数据的

动画：

部分中正确配置

因此，我添加了一个新状态，即

void

，并添加了一个从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'))
]);

---

WebLower因发现“void”而备受赞誉。你为我节省了很多时间。