angular中ElementRef用法

javascript/jquery

浏览数:236

2020-7-16

使用场景:在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();

作者:大牛哥