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)
     }
}

参考 这个stackoverflow问题