Zugriff auf DOM-Element mit Vorlagenreferenzvariablen auf Komponente

Question

Ich versuche, einen Verweis auf das DOM-Element für eine Komponente in einem Angular 2-Vorlage mithilfe einer Vorlage Referenzvariable zu erhalten. Dies funktioniert mit normalen HTML-Tags, hat aber ein anderes Verhalten bei Komponenten. z.B.

Gibt es eine Möglichkeit, die Vorlagenreferenzvariable zu zwingen, auf den DOM-Knoten zu verweisen, selbst wenn es sich um eine Komponente handelt? Und wenn ja, ist es überall in den Dokumenten enthalten? Die einzigen Dokumente, die ich hier finden kann, sind hier https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars und sie gehen nicht sehr detailliert auf die Auflösung der Variablen ein.

Answer 1

Es hängt davon ab, wie Sie diese Referenz verwenden werden.

1) Es gibt keinen geraden Weg Komponente DOM Referenz im Vorlage zu erhalten:

import {Directive, Input, ElementRef, EventEmitter, Output, OnInit} from '@angular/core'; 

@Directive({selector: '[element]', exportAs: 'element'}) 
export class NgElementRef implements OnInit 
{ 
    @Output() 
    public elementChange:EventEmitter<any> = new EventEmitter<any>(); 

    public elementRef:ElementRef; 

    constructor(elementRef:ElementRef) 
    { 
     this.elementRef = elementRef; 
     this.elementChange.next(undefined); 
    } 

    @Input() 
    public get element():any 
    { 
     return this.elementRef.nativeElement; 
    } 

    public set element(value:any) 
    { 

    } 

    ngOnInit():void 
    { 
     this.elementChange.next(this.elementRef.nativeElement); 
    } 
} 

Verbrauch:

<my-comp [(element)]="var2"></my-comp> 
<p>{{var2}}</p> 
<!--or--> 
<my-comp element #var2="element"></my-comp> 
<p>{{var2.element}}</p> 

2) Sie können diese Referenz in der Komponente erhalten, die Vorlage mit @ViewChild('var2', {read: ElementRef}) besitzt.