[英]External scripts do not load after routing to another component in Angular application
我的 Angular 7 应用程序上有一个导航栏。 我还有一个自定义 javascript 文件,该文件在应用程序最初加载时加载。 单击我的应用程序中的链接以路由到另一个组件后,外部 javascript 文件停止工作/不加载。 当我单击链接以路由到不同的组件时,如何让此 javascript 文件加载或保持加载状态?
我已将 javascript 文件正确添加到我的 angular.json 文件中,问题仍然存在。 我曾尝试在脚本标签内的 index.html 文件中加载脚本,这也不能解决我的问题。
我已经阅读了一些关于同一问题的较旧的 stackoverflow 线程,但似乎没有明确的答案或解决方案。
我希望我的自定义 js 文件在单击导航栏中的链接后加载其所有功能,该链接将我路由到另一个组件,但它没有加载任何功能。
当您更改路由时,您不是在加载新页面,而是在替换同一页面的部分 DOM。 它不会重新调用在初始页面加载时加载的 JS 文件。 如果您想在路由更改时运行一些 JS,您可以在组件的生命周期处理程序中调用它,例如 ngAfterInit,或者您可以创建一个通用路由处理程序,在每次路由更改时调用它。
你可以试试这个
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);
}
它像这样在你的组件类 NgOnit() 中运行
new Promise(resolve => {
this.loadScript();
});
在函数中包含 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();
这会起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.