Question

我的Angular 7应用程序上有一个导航栏。我还有一个自定义javascript文件，该文件在应用程序最初加载时加载。在我的应用程序中单击链接以路由到另一个组件后，外部javascript文件停止工作/未加载。当我单击链接以路由到其他组件时，如何加载或保持加载该javascript文件？

我已将javascript文件正确添加到我的angular.json文件中，问题仍然存在。我尝试将脚本加载到script标签内的index.html文件中，但这也不能解决我的问题。

我已经阅读了一些有关同一问题的较旧的stackoverflow线程，但似乎没有明确的答案或解决方案。

我希望在单击导航栏中的链接后，我的自定义js文件将加载所有功能，但该链接会将我路由到另一个组件，但不会加载任何功能。

Answer 1

您可以尝试

public loadScript() {
  const node = document.createElement('script');
  node.src = 'assets/new/js/script.js'; // put there your js file location
  node.type = 'text/javascript';
  node.async = true;
  node.charset = 'utf-8';
 document.getElementsByTagName('head')[0].appendChild(node);

}

它像这样在您的Component类NgOnit（）中运行

new Promise(resolve => {
  this.loadScript();
});

Answer 2

更改路由时，您不会加载新页面，而是要替换同一页面的DOM部分。它不会重新调用在初始页面加载时加载的JS文件。如果要在路由更改上运行一些JS，可以在组件的生命周期处理程序（如ngAfterInit）中调用它，也可以创建一个通用路由处理程序来在每次路由更改时调用它。

Answer 3

在函数内包含js代码，然后使用受外部js影响的组件声明您的js文件中的代码是这样的：

 function partnerSlider()
 {
$('.customer-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
        breakpoint: 768,
        settings: {
            slidesToShow: 4
        }
    }, {
        breakpoint: 520,
        settings: {
            slidesToShow: 3
        }
    }]
    });
 }

在您的component.ts js文件中，如下所示：

   import '../../assets/js/partner.js';

然后声明该函数，如下所示：

   declare const partnerSlider:any;

然后在组件的生命周期方法内调用此函数，如下所示：

 partnerSlider();

这将起作用

路由到Angular应用程序中的另一个组件后，外部脚本不会加载

3 个答案: