구성 요소 클래스에서 템플릿 참조 변수에 액세스

구성 요소 클래스에서 템플릿 참조 변수에 액세스

---

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

구성 요소 클래스에서 템플릿 액세스 변수에 액세스 할 수 있습니까?

즉, 여기에서 액세스 할 수 있습니까?

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

---

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html에 대한 사용 사례입니다 @ViewChild.

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

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

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

다음은 작동하는 데모입니다 : 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 {}

참고 URL : https://stackoverflow.com/questions/39631594/access-template-reference-variables-from-component-class