改变路线后，Angular 4 JS脚本无法正常工作

Posted 2021-04-04

我尝试通过angular-cli加载脚本来同步两个div。当第一次加载页面时，脚本工作正常。我通过导航改变路线的Aftter。返回第一页时，脚本不再起作用。

角度CLI：

  "scripts": [
    ....
    "assets/scripts/scrollsync.js"
  ]

scrollsync.js：

$(function() {
  $('#column-item-container').on('scroll', function () {
    $('#row-lead-container').scrollTop($(this).scrollTop());
  });

  $('#column-item-container').on('scroll', function () {
    $('#column-lead-container').scrollLeft($(this).scrollLeft());
  });
});

我试图弄清楚脚本是否仍然存在以设置超时1000ms发送一些到控制台，这工作正常。我看起来绑定不再起作用了。一些建议来解决这个问题？谢谢！

答案

此问题可能发生，因为大多数第三方库或自定义代码初始化文档就绪事件。所以这就是它第一次工作的原因。一旦你导航到另一个页面并返回同一页面，角度不重新加载页面，它只是渲染html部分和文档就绪事件不会激发。

解

• 打开页面时绑定事件，而不是文档就绪。
• 你可以制定一个指令来绑定滚动事件，指令总是在dom元素绑定时绑定事件，它不依赖于文件就绪事件。