angular2的ElementRef在组件中获取不到

原创
2017/08/01 11:35
阅读数 519

 angular2的ElementRef在组件中获取不到

angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,ViewContainerRef ,TemplateRef)配合

@ViewChild或@ViewChildren就可以获取到dom元素,但是这个过程中有些文档未提及的坑,本人不小心踩进去,半天才爬出来,因此分享一下。

 

首先,需要在ng2的模板中使用 #banners 定义一个模板局部变量,如:

<div class="swiper-wrapper" #bannersEL></div>

 接着在模板对应的组件类中,使用组件中元数据@ViewChild来获取模板局部变量的读写权限:

export class DemoComponent implements AfterViewInit  {
  
 @ViewChild("bannersEL") bannersEl: ElementRef;

 ngAfterViewInit(): void {
   console.log(this.bannersEl);
  }
}

 其中 @ViewChild("bannersEL") bannersEl: ElementRef 还可以使用如下语法限定局部变量的权限:

@ViewChild("bannersEL",{read:ElementRef}) bannersEl: ElementRef;

还需要注意点,this.bannersEl 对象获取模板局部变量时机,仅在ngAfterViewInit生命周期之后才,也就是说在组件构造器,及onint等生命周期时是获取不到的。

然后还有一个最坑人的一点#bannersEL 模板局部变量最好写在html元素的最前面,像上面那样在模板标签中定义模板局部变量,居然会导致组件中获取不到,目前还不知道原因为何,正确写法如下

<div #bannersEL class="swiper-wrapper">

 但是你以为这样就完了吗,不还有坑,如果你的模板中用了ngFor指令,并且循环绑定了模板局部变量,如:

<div #bannersEL class="swiper-slide" *ngFor="let banner of banners;t"></div>

 //--------ts

  @ViewChildren("bannersEL") bannersEl: QueryList<ElementRef>;

 

  ngAfterViewInit(): void {

   console.log(this.bannersEL.length)

  }

//输出结果是0,而实际上模版最终生成的div是有3个

解决以上问题的办法就是模板代码不懂,js中做如下变动:

ngAfterViewInit(): void {
   this.bannersEl.changes.subscribe((list:QueryList<ElementRef>)=>{
    if(list.length > 0){
     list.forEach( el=>{
       el.nativeElement.style.display="none";
     });
    }
   });
  }

通过订阅changes来获取循环后得到div对象

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部