Какие есть хорошие альтернативы для доступа к DOM с использованием nativeElement в Angular2?

Question

Взяв в качестве примера следующий код, который является хорошей альтернативой для доступа к DOM с использованием 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);
     }
}

Это тест Plunker для вас проще.

Answer 1

Так как доступ напрямую к 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 эквивалентны.