为什么路由器插座中的滚动动画无法正常工作以及如何解决？

Question

我正在尝试使动画滚动播放以在angular7前端中工作，但是在路由器插座中则无效。 我认为这与角度处理路由器出口中的滚动位置有关，如许多有关滚动的问题所建议的那样。

我的问题： 如何在路由器出口内实现预期的行为？ 这有可能吗？ 有人对为什么会发生问题有解释吗？

具体来说，一旦通过滚动到达某些div，我想将来自animations.css的zoomIn动画应用于某些div。 为了使其正常工作，我使用了“ ng2-animate-on-scroll”软件包，该软件包运行良好，直到div位于路由器出口内。

在我的app.component.html中：

<div animateOnScroll animationName="animated zoomIn">
     text to zoom in on scroll <---works
</div>

<router-outlet></router-outlet> <--- everything in here doesn't work

<div animateOnScroll animationName="animated zoomIn">
     text to zoom in on scroll <---doesn't work
</div>

当我在路由器出口上方的app.component.html中放置一些div时，滚动上的动画是可见的，并且按预期工作。 但是，路由器出口内或下方的所有内容均未设置动画。

有什么建议吗？

Answer 1

选择“路由器出口”下的页面使用它们自己的模块，这就是为什么ng2-animate-on-scroll被导入到错误的模块文件中的原因。 显然，它不能从app.module.ts继承。