angular2-使用bootstrap-select插件

最新推荐文章于 2025-07-11 13:32:47 发布

lucky ^_^

最新推荐文章于 2025-07-11 13:32:47 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-angular2

本文链接：https://blog.youkuaiyun.com/wgp15732622312/article/details/75210710

前端-angular2 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了Angular2应用中Bootstrap-select插件在特定场景下的显示问题，并提供了解决方案。当从登录页面跳转到组件页面时，由于Angular2默认仅加载一次index.html，后续页面切换不会重新执行JS初始化代码。文章介绍了如何利用Angular2的生命周期钩子ngAfterViewInit来确保Bootstrap-select插件正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：站在巨人的肩膀上，在angular2的组件模板里用到了bootstrap-select插件，非常的爽。但是遇到了一个问题。直接进入组件页面时，bootstrap-select的插件显示完全没有问题。然而先进入登录页，在进入组件页面。bootstrap-select插件就显示的有问题了，该插件不起作用。于是探索开始了。

angualr2框架，默认只加载一个html，就是启动也index.html。同时也会加载相关的js文件。一旦index页面显示出来了，再次进入组件页面时，是不会再次运行js里的方法的。除非你显示调用了js里的方法。必须在组件初始化时显示调动下该插件初始化的方法。然后根据angular2的特性，是先运行component文件，才是显示页面的。也就是说不能够通过class选择器，id选择器等来对页面进行操作。但是angular2这么强大的框架，怎么会忽视这个问题呢。于是用到了angular2的生命周期。点击打开链接

angular2中组件的 ngAfterViewInit()方法。该方法在初始化完组件视图及其子视图之后会触发。所以该方法是在页面出来之后出现的。这样的话，就能够使用类选择器，id选择器等。

export class SecondExamCount implements OnInit,AfterViewInit {
  isInit = false;
ngAfterViewInit(){
  if(!this.isInit){
    $('.selectpicker').selectpicker(); 
    this.isInit = true;
  }
}