輸入標籤裏面的＃是什麼意思？

Question

我正在閱讀angular2的文章，他們使用<input type='text' #hobby>。在#hobby的幫助下，他們提取了在文本框中鍵入的值，而不是使用ngModal。我沒有得到那是#hobby的意思。

Answer 1

#，內部輸入，表示您正在處理局部變量。 它是一種在HTML中定義局部變量的Angular2方法。 #將在幕後工作並用相關值更新您的變量。

<input type='text' #hobby> 

這裏hobby是指一個局部變量，因爲它與#符號限定。如果你的東西在文本框中鍵入，hobby變量將立即更新，您可以通過something.value語法訪問更新後的值，從而hobby.value會給你更新後的值。

Answer 2

嘗試將此添加到您的模板（HTML）：

<button (click)="clicked(hobby)">Click</button> 

添加到您的組件類：

clicked(a) { 
    console.log(a); 
} 

你會看到這意味着什麼。

Answer 3

請參閱Template Syntax > Referencing a template reference variable。

「[hobby]」的哈希（＃）前綴表示我們正在定義[hobby]變量。

與使用ref-hobby屬性相同，並允許您訪問變量的內容，例如在點擊處理程序中。

<input #hobby> 
<button (click)="something(hobby.value)">Do Something</button>