Angular 2 Router 等待组件上的动画完成，然后在路由更改时销毁它

Question

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

现在要做到这一点，我想通过组件进入和离开时的路线数据执行给定的动画。该动画可能会根据当前路线和下一条路线而有所不同。例如，切换到/mainfrom/first可能会触发后退动画，而切换到/mainfrom/second可能会触发前进动画。

现在的问题是：如何将此动画绑定到组件并允许其完成？路由器渲染一个像这样的组件：

<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 允许它们去完成。但我无法更改路由更改时的组件（它是一个常量，请参阅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 并不是最佳实践。我只会认为这是最后的手段。如果有人知道如何<div></div>通过 Angular Renderer 或 ViewContainerRef 等来包装组件，那么我很高兴听到这一点。然后我可以将动画绑定到该<div></div>包装器并在动画完成后手动销毁它。

动画应该在不延迟新组件进入动画的情况下执行。

所以我希望有人能够对如何以最好的方式实现这一目标提出想法/建议。