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