Javascript Angular2 routerLink动画被阻止，直到新组件就绪

每次更改应用程序的路径时，我都要创建淡出/淡入动画。 对我来说，理想的流程如下：

用户单击链接（例如

下面是一个工作示例：

唯一的问题是，我的目标组件很难加载，它需要几秒钟的时间，而不是按顺序执行上面的4点，结果是1、3、2、4：甚至在开始淡出动画之前，整个页面都被阻止，内容被冻结，什么都没有发生，然后，一旦新组件准备好，动画就会停止开始时，当前内容会很快淡出，新组件也会淡入。这对我来说是个问题，因为用户在等待的两秒钟中体验不好

这里有一个问题的例子：

我进行了一点调试，发现：


动画实际上是在加载新组件之前触发的，但它没有渲染（ng animate queued类被添加到动画元素中）
这个问题似乎甚至影响到普通的css，就好像我一单击链接就添加了一个类（例如class
hid
with css
.hid{opacity:0}
），即使我在Chrome的开发工具中看到添加到元素中的类，内容仍然保留，并且只有在新组件准备好之后，在被阻止2秒后，css才会应用，内容的不透明度为0
整个页面似乎都冻结了，在加载新组件时，活动链接的指针光标和红色突出显示始终保持不变，即使我将鼠标从链接区域移出

我考虑过将繁重的数据生成从
ngOnInit
移动到
ngAfterViewInit
方法（这能解决我的问题吗？），但有些子组件需要从HTML中立即注入数据作为
@Input
属性：如果我在
ngAfterViewInit
中生成数据，子组件将被破坏

有没有一种简单的方法可以在不使结构复杂化的情况下解决这个问题？

多谢各位