フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

Angular2 for TypeScriptのお勉強-sample(9)【inputの入力値を扱う。Referencing a template reference variable】

Angular2 for TypeScriptのお勉強-sample(9)【inputの入力値を扱う。Referencing a template reference variable】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

input値をbuttonに仕込んだイベントから参照、イベントに渡す方法です。
チュートリアルのここです。

#として設定

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">call</button>

ref-prefixとして設定

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

input要素に#phoneとすることでbutton要素がphoneへの参照を可能にしています。
ref-faxもやはりbutton要素からfaxへの参照を可能にしています。

上記のことは同じ要素か、兄弟要素か、子要素に対してできるようです。

試してみたのがこちら

<button ref-oneself (click)="callOneself(oneself.value)" value="it's me!">it's me!</button>
自分自身のvalueを参照しています。

コンポーネント側

export class ChildComponent {
callPhone(value){
alert(value);
}
callFax(value){
alert(value);
}
callOneself(value){
alert(value)
}
}

なるほどですねーー。

今回のコード

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事