我想创建一个模块来监听路由更改，并且路由更改会根据当前路由和下一个路由执行给定的动画 . 基本上它应该解决这个问题：https://github.com/angular/angular/issues/9845
像这样（草稿）：https://github.com/bergben/ng2-page-transition/issues/6

现在要做到这一点，我想通过组件的进入和离开时的路径数据执行给定的动画 . 此动画可能会根据当前路线和下一个路线而有所不同 . 因此，例如从 /first 切换到 /main 可以触发回溯动画，而从 /second 切换到 /main 可以触发前进动画 .

现在问题：如何将此动画绑定到组件并允许它完成？路由器呈现如下组件：

<router-outlet></router-outlet>
<my-current-component>...</my-current-component>

但是在路线改变时它会立即销毁 <my-current-component>...</my-current-component> 并用新组件替换它 .

我知道在组件装饰器中将动画绑定到主机，如下所示：https://github.com/designcourse/angular-auth-demo/blob/master/src/app/login/login.component.ts#L11允许它们完成 . 但我可以't change the Component on route change (it'一个常数，见https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html#!#component-anchor）

我应该提一下，我发现在渲染组件周围包裹另一个元素就像

<router-outlet></router-outlet>
<div>
   <my-current-component>...</my-current-component>
</div>

防止路由器破坏组件 . 但是，直接访问DOM并不是最佳实践 . 我只会认为这是最后的手段 . 如果有人知道如何通过Angular Renderer或ViewContainerRef 's etc. then I'在组件周围包裹 <div></div> ，我很高兴听到这个消息 . 然后我可以将动画绑定到 <div></div> 包装器并在动画完成后手动销毁它 .

The animation should be executed without delaying the new components entering animation.

所以我希望有人可能对如何以最佳方式实现这一目标有一个想法/建议 .

angular angular2-routing