Góc 2: Có thể truy cập các biến tham chiếu mẫu từ Lớp thành phần không?

Question

<div> 
    <input #ipt type="text"/> 
</div> 

Có thể truy cập biến truy cập mẫu từ lớp thành phần không?

tức, tôi có thể truy cập nó ở đây,

class XComponent{ 
    somefunction(){ 
     //Can I access #ipt here? 
    } 
} 

Answer 1

Đó là một use-case cho @ViewChild: https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

class XComponent{ 
    @ViewChild('ipt') input: ElementRef; 

    ngAfterViewInit(){ 
     // this.input is NOW valid !! 
    } 

    somefunction(){ 
     this.input.nativeElement...... 
    } 
} 

Dưới đây là một bản demo làm việc: https://plnkr.co/edit/GKlymm5n6WaV1rARj4Xp?p=info

import {Component, NgModule, ViewChild, ElementRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input #ipt value="viewChild works!!" /> 
    </div> 
    `, 
}) 
export class App { 

    @ViewChild('ipt') input: ElementRef; 

    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    ngAfterViewInit() { 
    console.log(this.input.nativeElement.value); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}