angular中ElementRef用法

使用場景：在C層直接操做V層DOM

Angular支持跨平臺，web、移動、桌面應用，經過使用ElementRef ，就能夠操做不一樣平臺下視圖層中的 native 元素 (在瀏覽器環境中，native 元素一般是指 DOM 元素)，最後藉助於 Angular 提供的強大的依賴注入特性，咱們就能夠輕鬆地訪問到 native 元素。

一、ElementRef API

class ElementRef<T> {
  constructor(nativeElement: T)
  nativeElement: T
}

二、使用過程

1）模板中標記須要操做的dom元素

<a style="display: none" routerLink="./../../" #linkToIndex>返回到列表頁</a>

2）C層中引入ElementRef類（使用的時候webstorm會自動引入）
3)C層聲明ElementRef變量，並使用@ViewChild裝飾器使該屬性與V層的標記產生關聯

/*使用ViewChild在C層中使用V層中定義的跳轉到首頁按鈕*/
  @ViewChild('linkToIndex', {static: true})
  linkToIndex: ElementRef;

4）對V層的DOM元素進行操做
this.linkToIndex.nativeElement.click();