参数更改时在组件上触发动画

Question

我试图在组件的参数更改时触发动画，但只能使组件首次被路由到的动画执行。随后使用不同参数导航到该组件的所有后续操作都不会触发动画。例如，

参见this plunker。

当从

/home 

导航到

/home/animated/1 

动画正在执行。如果只有ID改变，例如

/home/animated/2 

什么也没有发生。我错过了什么或者这是什么意图？

Answer 1

我也碰到了这个问题，如果有人知道为什么，请帮助 - 我的解决办法：

我有一个转盘，通过幻灯片自动路由：

Component.HTML： 我不得不换行在动画

<div [@slideInOutAnimation]='mainState'></div> 

的路由组件的DIV然后改变状态，当它改变状态恢复，以便它可以为下一张幻灯片再次运行前路由到一个新的ID和延迟。

Component.TS：

this.mainState = 'enter'; 
var delayAnim = setTimeout(() => { 
this.mainState = 'new'; 
},3000) 

这里是动画的部分原因是使用 Animation.TS：

trigger('slideInOutAnimation', [ 

    state('new', style({ 
     ... 
    })), 

    transition('* => enter', [ 
    ...style...animate... 
    ]) 

这种方式，路由到一个新的ID，当它改变了状态'进入'让动画运行，然后将状态改回'新'，所以下一条路线可以再次运行动画。家/组件/ 1 =>家庭组件/ 2等