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

Question

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

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

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

谢谢。

Answer 1

之所以会发生这种情况，是因为页面一次被完全加载，然后在您的路线（SPA）上导航时仅重新加载了页面的一部分。因此，$(document).ready事件在页面加载时仅触发一次。

一种解决方法是在某个角度的生命周期内自行触发第三方脚本，例如，角度路由器NavigationEnd事件：

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

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