Angular2 for TypeScriptのお勉強-sample(9)【inputの入力値を扱う。Referencing a template reference variable】
フロントエンドエンジニア芸人もりたけんじの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)
}
}
なるほどですねーー。
でわまた〜〜
