javascript - 如何在 Angular 6 中运行第三方 JS 脚本

Question

我在 Angular 应用程序中有一些第三方JS脚本，它具有$(document).ready功能，一开始一切正常，但是当我通过routerLink更改路由时，某些功能不起作用，但是当页面重新加载时，它就可以工作.

我尝试过导入 angular.json 和 index.html 中的 JS 文件。

如果您有解决此问题的方法，请帮忙。

谢谢。

Answer 1

发生这种情况是因为页面已完全加载一次，然后当您在路线 (SPA) 上导航时，仅重新加载页面的部分内容。因此，$(document).ready 事件仅在页面加载时触发一次。

实现此目的的一个解决方法是在某个 Angular 生命周期中自行触发第三方脚本，例如 Angular 路由器 NavigationEnd 事件:

this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
     // do your stuff here
  }
});

但是这样不好，很容易失去控制。如果您将第三方库封装在某些 Angular 组件中，例如，这可能会更好。指令，以避免 $(document).ready 模式。