更改路线后，Angular 4 JS脚本不起作用 [英] Angular 4 JS script not working after changing route

问题描述

我尝试通过angular-cli加载脚本以同步两个div.首次加载页面时，脚本可以正常工作.之后，我通过导航更改了路线.返回首页时，该脚本不再起作用.

I try to load a script via angular-cli to sync two divs. When page is loaded for the first time, the script is working fine. Aftter that I change the route via Navigation. When going back to the first page, the script is not working anymore.

Angular CLI:

Angular CLI:

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

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());
  });
});

我尝试找出该脚本是否仍然存在，以设置超时时间(1000毫秒)将一些消息发送到控制台，这很好.我似乎绑定不再起作用.一些建议来解决这个问题?谢谢！

I try to figure out if the script is still present to set a timeout with 1000ms sending some to console, that works fine. I looks like the binding is not working anymore. Some advice to fix this problem? Thank you!

推荐答案

此问题可能是由于大多数第三方库或自定义代码在文档就绪事件上初始化而发生的.所以这就是为什么它第一次起作用.导航到另一个页面并返回同一页面后，即不重新加载页面，它只是呈现html部件和文档就绪事件而不会触发.

This issue probably happening because most of third party library or custom code initialize on document ready event. So that's why it work first time. Once you navigate to another page and come back on same page, angular not reloading page, it just render html part and document ready event not fire.

解决方案

• 打开页面时绑定事件，未准备好文档.
• 您可以创建一个指令来绑定滚动事件，当dom元素绑定时，该指令将始终绑定事件，它不依赖于文档就绪事件.

这篇关于更改路线后，Angular 4 JS脚本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！