今天要介紹的不是 Tip！是有關 Angular 各種 Ref 的事。

在前面幾天的文章或多或少都有提到其中的幾個 Ref，像是在講動態插入 component 的時候就有提到 TemplateRef；當想在 attribute directive 內取得 host element 的時候就會注入 ElementRef 等，這些 Ref 其實都代表著一種觀念。

我們可以快速的用以下表格帶出一個結論：

參考：The differences between ElementRef, TemplateRef, ViewContainerRef | Ashnita Bali & Marcin Ryzycki

我相信天資聰穎的你一定知道這個表格背後所代表的意義！但為了我的文章字數著想，請容我花點時間說明。

在程式碼內的 ViewRef 實際上代表的是一個 component view，一般情況下拿不到，拿了也不能做什麼，所以就先跳過！

ViewContainerRef 的部分，View Container 的作用就如同它的名稱一樣，它乘載著各種 view，在實務上我們可以透過 DI 來取的當前 view 所在的 ViewContainerRef 實體，並透過這個實體來新增其他的 view。像之前在 Day17 動態新增、插入 component 的文章，就是透過這個 ViewContainerRef 來做操作。

ComponentRef 代表的是藉由 ComponentFactory 建立出來的那個物件，透過 ComponentRef 我們可以取得 component 類別的實體、hostView 等資訊，通常也是當你有需要動態新增 component 的時候才會用到這個類別。

TemplateRef 代表的是 embedded template，能夠用來建立 embedded view。通常可以透過 放在 ng-template 上的 directive 來取得。也可以透過 query 的方式直接取得 TemplateRef。

最後是各位最常見的 ElementRef，只要是嘗試用放在 HTML 元素身上 的 template variable 做 query 的話，就會取得一個 ElementRef 的實體，只要再透過它的 nativeElement 屬性，就能夠取得實際的 HTML 元素。

以上是這些 Ref 字根各自代表的意一的快速分享！

星期一的憂鬱 ?

以下按照入團順序列出我們團隊夥伴的系列文章！

請自由參閱 ?

• 打通 RxJS 任督二脈
• 深入 Azure 雲端服務
• 如何用Laravel寫一個簡單的部落格網站
• 推動資安從0起步邁向70分，不用花大錢也能有聲有色保平安。
• Azure Serverless 平步青雲，漫步雲端