angular2-使用bootstrap-select插件

    背景:站在巨人的肩膀上,在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;
  }
}





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 34
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值