別のHTML要素から値を取得

Question

ユーザーがボタンをクリックすると、input要素の値を送信する必要があります。 Angular2でこれを達成する最良の方法は何ですか？

<input type="text" class="form-control" placeholder="Search for images..." /> 
<span class="input-group-btn"> 
    <button (click)="onClick($event)" class="btn btn-default" type="button">Go!</button> 
</span> 

Answer 1

あなたは、あなたがname.value

<input type="text" class="form-control" placeholder="Search for images..." #inputElement /> 
<span class="input-group-btn"> 
    <button (click)="onClick($event, inputElement.value)" class="btn btn-default" type="button">Go!</button> 
</span> 

そのない私はあなたのようにクリック機能をバインドすることができ

Answer 2

言うその最も簡単な最高のそれを使用することができ#nameを使用して入力するrefferenceを定義することができます：

<input type="text" [(ngModel)]="value" placeholder="Enter the name" /> 
<span class="input-group-btn"> 
    <button (click)="onClick(value)">Go!</button> 
</span> 

.TSに0

は、あなたが "それを送信" する必要が

onClick(valueRecieved){ 
// do what you want 
}