在Angular2中使用nativeElement访问DOM有哪些好的替代方法？

以下面的代码为例，它们是使用nativeElement访问DOM的良好替代方案

从'angular2/core'导入{Component，Directive，Input，ElementRef}；
@指示({
选择器：“[myDR]”，
主持人:{
“（mouseenter）”：“mouseenter（）”
}
})
导出类MyDi{
@输入（）myColor:string；
构造函数（专用el:ElementRef）{
}
mouseEnter（）{
this.el.nativeElement.style.backgroundColor=this.myColor；
console.log（this.myColor）；
}
}

---

这是一个更简单的测试。

因为不鼓励通过

nativeElement

直接访问DOM，所以您有三个选项

• 使用

  host

  属性（这将立即设置颜色）

@指令({
主持人:{
“（mouseenter）”：“mouseenter（）”，
“[style.background color]”：“myColor”
}
})
mouseEnter（）{
this.myColor='blue'；
}

• 使用

  @HostBinding

  （此案例将立即设置颜色）

@HostBinding（'style.background color'）获取颜色{
返回此.myColor；
}
mouseEnter（）{
this.myColor='blue'；
}

• 使用

  渲染器

  （使用此渲染器而不是

  nativeElement.style='value'

  ）

构造函数（公共呈现器：呈现器，公共元素：ElementRef）{}
mouseEnter（）{
this.renderer.setElementStyle（this.element.nativeElement，'background color'，this.myColor）；
}

---

请注意，

host

和

@HostBinding

是等效的。

我看到在Observable.fromEvent中使用this.element.nativeElement作为目标参数。这个答案是否适合这个案例，或者您是否有一些“合法”的选择？