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

108

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

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

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

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

angular typescript angular2-template

— jackOfAll
소스

152

다음의 사용 사례입니다 @ViewChild.

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

class XComponent {
   @ViewChild('ipt', { static: true }) input: ElementRef;

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

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

다음은 작동하는 데모입니다.

https://stackblitz.com/edit/angular-viewchilddemo?file=src%2Fapp%2Fapp.component.ts

— mxii
소스

그러나 디버깅시 this.input 자체가 정의되지 않은 것으로 나타납니다.

— jackOfAll

내가 언급했듯이 이벤트 ngAfterViewInit()가 시작된 후에 만 사용할 수 있습니다 . 당신은 수입에이 ViewChild'에서 @ 각도 / core` ..

— mxii

하지만 값을 어떻게 설정할 수 있습니까? 시도 this.ipt.nativeElement.setAttribute('value', 'xxx');했지만 아무 일도 일어나지 않습니다. 그리고이 같은 어떠한 방법이 없습니다 value()또는 setValue()I 형 HTMLInputElement (내가 IDE의 코드 힌트 / 자동 완성에이를 내놓고있어)의 선언하더라도. 제 경우에는 값을 읽는 데 신경 쓰지 않습니다. 다른 값만 설정하면됩니다.

— MrCroft

현재 Holiday ..도 해보 setProperty셨나요?

— mxii

this.input.nativeElement.value = 'test'작동하지 말아야합니까 ?! 양식과 바인딩에 특별한 동작이있을 수 있습니다.

— mxii