獲取元素的參考

Question

只爲了解事情的工作原理。

讓說我有fellowing代碼

<my-element #ref></my-element> 
<button (click)="ref.classList.add("prettify")"></button> 

它會拋出一個錯誤，因爲ref回報MyElement一個實例。

我如何才能將<my-element>作爲dom元素？我是不是要在我的課堂上保持ElementRef並且做ref.el.classList.add(...)？

我與表單元件試圖太

<form #ref></form> // return a ref about the element 
<form #ref="ngForm"></form> return a ref about NgForm 

Answer 1

@ViewChild可以用來得到一個參考元件如這裏所示。

<my-element #ref></my-element> 

//<---<button (click)="ref.classList.add("prettify")"></button> I don't understand purpose of having this line. What does button do? 

在組件

，

import {ViewChild,ElementRef} from '@angular/core'; 

export class AppComponent{ 

    @ViewChild('ref') ref:ElementRef; 

    ngAfterViewInit(){ 
    console.log(this.ref.nativeElement); 
    } 
} 

DEMO：https://plnkr.co/edit/uP7CYM?p=preview