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();