代码之家 › 专栏 › 技术社区 › progman

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

angular2-routing angularjs

progman · 技术社区 · 7 年前

我添加了一些第三方库。(引导、Jquery和引导选择( http://silviomoreto.github.io/bootstrap-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中重新创建脚本元素,但它会刷新页面(下面提到的链接)。

Load scripts through all components in Angular 2

https://github.com/angular/angular-cli/issues/4619

我想在导航时加载第三方库而不刷新页面。

源代码: RepoLink

1 回复 | 直到 7 年前

nilesh93 7 年前

您需要了解的是,JQuery和Angular结合在一起并不是一个很好的实践。但是如果您坚持使用jquery插件,比如您提到的select库,那么最好的方法就是在angular中使用该库编写一个指令。

然而,在这种情况下,可以提供一个更简单的解决方案来实现您的需求,但这不是最好的实现。最好的实现是编写一个公共指令。

为什么你的select插件不能用于路线导航和页面刷新,这很简单。当页面刷新时,包含的选择库将运行所有可用的dom元素,并应用必要的执行以使选择生效。但是,当您使用角度路由器(新呈现的页面)离开它时,不会经历上述过程。因此,选择将不起作用。

最简单的解决方案是在您的学校中实现lifecycle挂钩接口AfterViewInit。组成部分ts和在函数的实现中添加这行代码。

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

应该可以了

推荐文章

lahsrah · 在何处声明角捕获所有(未找到)路由

7 年前

Mike · 在Angular 4中处理两个URL(矩阵和查询)参数+

7 年前

iChrome · 同时向两个组件施加角度载荷

7 年前

MarcoLe · Angular 5-路由更改url但不导航

7 年前

Chris O'Brien · 角度5个子管线向管线添加括号

7 年前

user1059939 · 是否在子路由中保留路由参数?

7 年前

Sathya V · 路线导航时角度组件属性未重置

7 年前

Sakkeer A · 如何在单击Angular 2中的按钮时实现全屏窗口功能?

7 年前

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

7 年前

Marco24690 · 角度2向应用程序根组件发射事件

7 年前