教程（Angular）模版引用變數的魔法

【翻譯】【教程】模版引用變數的魔法

alain chautard

譯者：而井

模版引用變數是個好東西，它允許angular完成許多有用的事情。我經常稱這個功能為「井號語法」，因為在模版中它依賴乙個簡單的井號來建立對乙個元素（譯者注：元素包括html元素和元件元素）的引用：

上述的語法是如此的簡潔：它建立了乙個指向input元素的引用，這個引用稍後可以在我的模版中使用。需要注意的是，這個（引用）變數的作用域是它所定義的整個html模版（的範圍）（譯者注：即在定義這個引用變數的html模版中都可以訪問這個變數）。

例如，這裡就是我如何用這個引用來獲取輸入框的值（的例子）：

call

注意那個phone（變數）指向了input的htmlelement物件例項。所以phone（變數）持有了（相應）htmlelement（例項物件）的任何屬性和方法，如id、name、innerhtml、value等。

上述是一種避免使用ngmodel或其他資料繫結的好方法，（因為）這種方法在校驗方面上不需要寫太多**。

答案就是可以奏效！假設我們有helloworldcomponent如下：

@component()
export class hellocomponent

現在按照如下**，我們使用了「井號語法」得到了元件的引用：

它（模版引用變數）乙個最好的地方就是我們可以獲取實際上的元件例項物件helloworldcomponent。所以我們可以訪問這個元件的任何方法或屬性，即使他們（的許可權）是宣告為私有或保護的，多麼令人驚喜：}

我們不僅可以通過這種語法來讀取乙個元件的資料，而且也能修改它。

當然（可以），不過這裡需要進一步了解它（模版引用變數）。大部分的指令將會被作為（譯者注：html或元件標籤）的屬性來使用，這意味著我們無法在那裡真正應用「井號語法」，除非我們使用相同的語法進行扭**

first name value: }
first name valid: }
form value: }
form valid: }
`,})export class ******formcomp 
console.log(f.valid); // false
}}

教程 （Angular）模版引用變數的魔法