Доступ к элементу DOM с ссылочными переменными шаблона на компоненте

Question

Я пытаюсь получить ссылку на элемент DOM для компонента в шаблоне Angular 2 с использованием ссылочной переменной шаблона. Это работает с обычными html-тегами, но имеет другое поведение на компонентах. например

<!--var1 refers to the DOM node --> 
<div #var1></div> 

<!--var2 refers to the component but I want to get the DOM node --> 
<my-comp #var2></my-comp> 

Есть ли способ заставить ссылочную переменную шаблона для обозначения узла DOM, даже если он находится на компоненте? И если это так, то в документах оно есть? Единственные документы, которые я могу найти здесь, - это https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars, и они не вдаются в подробности о том, как разрешаются переменные.

Answer 1

Это зависит от того, как вы собираетесь использовать эту ссылку.

1) Там нет прямого способа получить ссылки на компонент DOM в шаблоне:

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); 
    } 
} 

Использование:

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

2) Вы можете получить эту ссылку в компоненте, который является владельцем шаблона с @ViewChild('var2', {read: ElementRef}).