Question

用Angular 2 rc 5

撰写的

typescript 1.9

我想获得属性指令实例的句柄。我使用的ViewChild使用了组件，但它为我提供了托管该指令的元素的句柄。

模板

<span myHighlight #directive> Highlight me! </span>

组件

/** Want handle to the directive. Instead gives handle to the span element */
@ViewChild('directive') directive:HighlightDirective;

ngAfterViewInit(){
   console.log(this.directive);
}

指令

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }
}

Running plunker

<span>元素打印到控制台，因此ViewChild没有抓住我需要的东西。如何获得对指令实例的引用？

Answer 1

@ViewChild('directive', {read: HighlightDirective}) directive:HighlightDirective;

或

@ViewChild(HighlightDirective) directive:HighlightDirective;

但是第二种方法会返回第一个HighlightDirective，而不是特定的一个。

如何获取Angular 2指令实例的句柄？

1 个答案: