我添加了一些 3rd 方库。（Bootstrap、Jquery 和 boot-strap-select ( http://silviomoreto.github.io/bootstrap-select/ )）
当我浏览页面时，“boot-strap-select”不起作用。但是当我刷新页面时它起作用了。但我想知道引导程序如何在不刷新的情况下工作。
我使用 npm 安装了库并在 angular-cli.json 中定义
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/bootstrap-select/dist/css/bootstrap-select.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/bootstrap-select/dist/js/bootstrap-select.js"
]
我试图在 DOM 中重新创建脚本元素，但它刷新了页面（下面提到的链接）。
https://github.com/angular/angular-cli/issues/4619
我想在导航时加载第三方库而不刷新页面。
源代码：RepoLink
您需要了解的是，JQuery 和 Angular 一起使用并不是一个很好的做法。但是，如果您坚持使用像您提到的 select 库这样的 jquery 插件，那么最好的做法就是在 angular 中使用该库编写指令。
但是在这种情况下，可以提供一个更简单的解决方案来满足您的要求，但这不是最佳实现。最好的实现是编写一个通用指令。
为什么您的选择插件不适用于路线导航并适用于页面刷新非常简单。当页面刷新时，您包含的选择库会运行所有可用的 dom 元素并应用必要的执行来使选择工作。但是当您使用 angular 路由器导航离开它时，新呈现的页面不会经过上述过程。因此选择将不起作用。
最简单的解决方案是在你的 school.component.ts 中实现生命周期钩子接口 AfterViewInit 并在函数的实现中添加这行代码。
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
那应该这样做
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句