從另一個 HTML 元素獲取值

Question

當用戶單擊按鈕時，我需要發送輸入元素的值。 在 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定義對輸入的引用，然后您可以使用它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

您可以將點擊功能綁定為：

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

在 .ts 文件上，您必須創建 onClick 函數

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