コンポーネントクラスからテンプレート参照変数にアクセスする

107

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

コンポーネントクラスからテンプレートアクセス変数にアクセスすることは可能ですか？

つまり、ここにアクセスできますか、

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

angular typescript angular2-template

— jackOfAll
ソース

151

これは次の使用例です@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 2016

私が述べたように、イベントngAfterViewInit()が発生した後に利用可能な唯一のもの。ViewChild'@ angular / core`からインポートする必要があります..

— mxii

しかし、どのように値を設定できますか？試しましたthis.ipt.nativeElement.setAttribute('value', 'xxx');が何も起こりません。また、HTMLInputElementタイプとして宣言した場合でも、value()またはのようなメソッドはありませんsetValue()（これはIDEのコードヒンティング/オートコンプリートに基づいています）。私の場合、値を読み取る必要はありません。異なる値を設定するだけです。

— MrCroft 2017年

現在ホリデーです。setPropertyまた、あなたも試しましたか？

— mxii

this.input.nativeElement.value = 'test'うまくいかない？！おそらく、フォームとそのバインディングに特別な動作があるでしょう。

— mxii