angular2中避免使用id引用dom元素
当使用Angular2,并且与第三方库打交道时,有时需要在Component中直接引用一个dom元素(例如高德地图API)。常见的方法是使用id属性。但模块化编程不推荐这种方法:因为id要保证整个HTML文档唯一,而这个保证会随着项目的变大而不可控。正如C语言中的全局变量是有害的东西一样,任何情况下,在javascript/html语境中,要尽量避免使用dom元素的id属性。 问题是,如何做到呢?
答案是使用 ElementRef。
首先,在模板中,使用 # 为某个dom元素标定出一个模板局部变量。
例如:
<div #myVar></div>
然后,在Component中,导入 ElemntRef、ViewChild和 AfterViewInit:
import { ElmentRef, ViewChild, AfterViewInit } from "@angular/core";
再次,在Component中定义属性:
export class TheComponent {
@ViewChild('myVar') ele: ElementRef;
}
最后,使用 ElmentRef.nativeElement:
export class TheComponent implements AfterViewInit {
@ViewChild('myVar') ele: ElementRef;
ngAfterViewInit(){
console.log(this.ele.nativeElement)
}
}