angular中ElementRef用法

使用场景：在C层直接操作V层DOM

Angular支持跨平台，web、移动、桌面应用，通过使用ElementRef ，就可以操作不同平台下视图层中的 native 元素 (在浏览器环境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 提供的强大的依赖注入特性，我们就可以轻松地访问到 native 元素。

1、ElementRef API

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

2、使用过程

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元素进行操作

const a = this.linkToIndex.nativeElement as HTMLAnchorElement;
a.click();
									

作者：大牛哥

原文地址：https://segmentfault.com/a/1190000021943360

喜欢 0