在 Angular 中导航时第三方库不工作

Question

我添加了一些第 3 方库。（Bootstrap、Jquery 和 boot-strap-select (http://silviomoreto.github.io/bootstrap-select/))

当我浏览页面时 "boot-strap-select" 不工作。但是当我刷新页面时它起作用了。但我想知道 bootstrap 在没有刷新的情况下是如何工作的。

我使用 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

Answer 1

您需要了解的是，JQuery 和 Angular 放在一起并不是一个很好的做法。但是如果你坚持使用像你提到的 select 库这样的 jquery 插件，那么最好的办法是在 angular.[=11= 中使用该库编写一个指令]

然而在这种情况下，可以提供更简单的解决方案来实现您的要求，但这不是最佳实施方式。最好的实现是编写一个通用指令。

为什么您的 select 插件不能用于路线导航和页面刷新，原因很简单。当页面刷新时，您包含的 select 库会运行所有可用的 dom 元素并应用必要的执行以使 select 正常工作。但是，当您使用 angular 路由器离开它时，新呈现的页面不会经过上述过程。因此 select 将不起作用。

最简单的解决方案是在您的 school.component.ts 中实现生命周期钩子接口 AfterViewInit 并在函数的实现中添加这行代码。

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4
});

应该这样做

在 Angular 中导航时第三方库不工作

Third party Library is not working when navigating in Angular

angularjs

angular2-routing