在組件上訪問帶有模板引用變量的DOM元素

我想要使用模板引用變量來獲取對Angular 2模板中的組件的DOM元素的引用。這適用於普通的html標籤，但在組件上有不同的行爲。例如在組件上訪問帶有模板引用變量的DOM元素

<!--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，他們沒有詳細說明變量是如何解決的。

來源

2017-02-12 rob

這取決於你將如何使用這個參考。

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})模板組件此引用。

來源

2017-02-12 04:29:19 kemsky

在組件上訪問帶有模板引用變量的DOM元素

回答

相關問題