angular2的ElementRef在组件中获取不到

 angular2的ElementRef在组件中获取不到

angular2不推荐操做dom，可是实际应用中不可避免的须要使用到dom操做，怎么操做，官方文档提供了一系列api（ElementRef，ViewContainerRef ，TemplateRef）配合

@ViewChild或@ViewChildren就能够获取到dom元素，可是这个过程当中有些文档未说起的坑，本人不当心踩进去，半天才爬出来，所以分享一下。

 首先，须要在ng2的模板中使用 #bannersEL 定义一个模板局部变量，如：

<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对象