navigationend - router events subscribe angular 4

Acceda a las variables de referencia de plantilla desde la clase de componente

Question

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

¿Es posible acceder a la variable de acceso de plantilla desde la clase de componente?

es decir, ¿puedo acceder aquí?

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

Answer 1

Ese es un caso de uso para @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......
}
}

Aquí hay una demostración funcional: 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 {}