高階 Angular 元件模式 5

原文:

handle template reference variables with directives

在之前的例子中，已經出現多次使用template reference variable（模板引用變數）的場景，現在讓我們來深入研究如何通過使用模板引用變數來關聯某個具體指令的引用。

在檢視模板內，獲取乙個指令的引用。

模板引用變數是獲取某個元素、元件或者指令引用的一種方式，這個引用可以在當前的檢視模板中的任何地方使用。它們通常是以#basetoggle或者#mytoggle="toggle"的語法宣告的。一旦宣告，在檢視模板的任何地方就可以使用它。

note: 請注意作用域的問題，如果你使用或者是乙個結構性指令，比如*ngif或者*ngfor，它會在這個模板上建立乙個新的作用域，之後在其內部宣告的模板引用變數無法在該模板作用域以外使用。

模板引用變數的解析順序通常為：

乙個指令或者元件通過它自身的exportas屬性，比如#mytoggle="toggle"宣告於以自定義標籤存在的元件，比如原生html元素，並且沒有任何元件繫結與它，比如

之後我們來分別看3個例子。

指令可以在它的元資料中宣告exportas屬性，這個屬性表示它被這個模板引用變數所標識，如下：

// toggle.directive.ts
@directive()
export class toggledirective

之後我們可以在檢視模板中直接使用toggle來獲取指令的引用，如下：

// mytemplaterefvar is the toggledirective

對於每乙個html元素，只會有乙個元件與之對應。當乙個元件繫結於乙個元素時，那麼宣告的模板引用變數將會被解析為當前元素上所繫結的元件，比如：

// toggleon is the toggleoncomponent

如果沒有元件與元素繫結，模板引用變數會指向當前這個html元素。

// somediv is an htmldivelement

這篇文章作者關於模板引用變數，僅僅介紹了關於如何宣告和在檢視模板中如何使用，我在這裡再補充一些，如何在元件或者指令類的內部使用。

在類內部獲取模板引用變數所指向的引用是通過使用viewchild裝飾器完成的，比如上述文章中的第二個例子:

@component()
@viewchild('mydiv')
mydiv: elementref;
ngafterviewinit() 
}

這裡的mydiv即指向當前模板引用變數所指向的html元素。

note: 在類中獲取模板引用變數所指向的引用時，請格外注意你期望獲取的引用型別，在例子中，我們期望獲取html元素，因此這裡的引用型別是elementref，如果是指令或者元件，則分別要對應其型別的type。