访问指令元素

Question

如何在指令类本身中访问我的指令附加到的元素？我需要对元素的引用才能通过Renderer 服务应用样式。使用ElementRef.nativeElement 有效，但那是officially discouraged，所以我想知道我们还有什么其他选择。

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

@Directive({
    selector: '[autoGrow]',
    host: {
        '(focus)': 'onFocus()',
        '(blur)': 'onBlur()'
    }
})
export class AutoGrowDirective {
    constructor(private _el: ElementRef, private _renderer: Renderer) {}

    /*
     * This code works, but uses ElementRef.nativeElement to reference the element
     */
    onFocus() {
        this._renderer.setElementStyle(this._el.nativeElement, 'width', '200px');
    }

    onBlur() {
        this._renderer.setElementStyle(this._el.nativeElement, 'width', '120px');
    }
}

Answer 1

应避免访问ElementRef.nativeElement...。将ElementRef 或ElementRef.nativeElement 与Renderer 中的方法一起使用就可以了。

对于预定义样式，您不需要ElementRef。您可以只使用主机绑定，如

@Directive({
    selector: '[autoGrow]',
    host: {
        '(focus)': 'onFocus()',
        '(blur)': 'onBlur()',
        '[style.background-color]': '"red"',
        '[style.left.px]': '"10"',
        '[style.top.%]': 'someProp',
    }
})   
export class AutoGrowDirective {
  someProp:number = 20;

  // or like
  @HostBinding('style.color') 
  someProp:string = 'grey';
}