Angular 2: Czy można uzyskać dostęp do zmiennych wzorcowych szablonu z klasy komponentów?

Question

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

Czy można uzyskać dostęp do zmiennej dostępu do szablonu z klasy komponentów?

znaczy, mogę do niego dostęp tutaj,

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

Answer 1

To use-case dla @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...... 
    } 
} 

Oto demo pracy: 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 {}