在Angular2中使用nativeElement访问DOM有哪些好的替代方法？(What are some good alternatives to accessing the DOM using

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

import {Component, Directive, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[myDR]',
    host:{
        '(mouseenter)' : ' mouseEnter()'
    }
})

export class MyDi {

    @Input () myColor: string;

    constructor(private el:ElementRef) {

    }

    mouseEnter(){

        this.el.nativeElement.style.backgroundColor = this.myColor;

        console.log(this.myColor);
     }
}
 
 这是一款让您更轻松地测试的Plunker 。 
Taking as an example the following code, which are good alternatives to accessing the DOM using nativeElement 
 
import {Component, Directive, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[myDR]',
    host:{
        '(mouseenter)' : ' mouseEnter()'
    }
})

export class MyDi {

    @Input () myColor: string;

    constructor(private el:ElementRef) {

    }

    mouseEnter(){

        this.el.nativeElement.style.backgroundColor = this.myColor;

        console.log(this.myColor);
     }
}
 
This is a Plunker for you test more easy.
                
最满意答案
                
                    
                        
 由于不鼓励通过nativeElement直接访问DOM， nativeElement您有三个选项 
 
 
  使用host属性（这将立即设置颜色）  
 
@Directive({
    host:{
        '(mouseenter)' : ' mouseEnter()',
        '[style.background-color]' : 'myColor'
    }
})

mouseEnter(){
    this.myColor = 'blue';
}
 
 
  使用@HostBinding （这种情况会立即设置颜色）  
 
@HostBinding('style.background-color') get color {
    return this.myColor;
}

mouseEnter(){
    this.myColor = 'blue';
}
 
 
  使用Renderer （使用此代替nativeElement.style = 'value' ）  
 
constructor(public renderer: Renderer, public element: ElementRef) {}

mouseEnter(){
  this.renderer.setElementStyle(this.element.nativeElement, 'background-color', this.myColor);
}
 
 请注意， host和@HostBinding是等效的。 
Since accessing directly to DOM through nativeElement is discouraged you have three options 
 
 
 Using host property (this will set the color immediatly) 
 
@Directive({
    host:{
        '(mouseenter)' : ' mouseEnter()',
        '[style.background-color]' : 'myColor'
    }
})

mouseEnter(){
    this.myColor = 'blue';
}
 
 
 Using @HostBinding (this case will set the color immediatly) 
 
@HostBinding('style.background-color') get color {
    return this.myColor;
}

mouseEnter(){
    this.myColor = 'blue';
}
 
 
 Using Renderer (use this instead of nativeElement.style = 'value') 
 
constructor(public renderer: Renderer, public element: ElementRef) {}

mouseEnter(){
  this.renderer.setElementStyle(this.element.nativeElement, 'background-color', this.myColor);
}
 
Note that host and @HostBinding are equivalent.