如何在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模式，則可能會更好。