[原文](https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/)

今天當我在做 Angular 開發時，一個知識點引起了我的注意：

![](https://img-blog.csdnimg.cn/img_convert/7ff0317cf2e81d7a9a167113b75d7707.png)

在檢查 DOM 時，我看到 ngcontent 被 Angular 應用於元素。 嗯……如果它們包含了最終 DOM 中的元素，那麼 \<ng-container> 有什麼用？ 當時我對 \<ng-container> 和 \<ng-content> 的區別感到困惑。

在尋求知道我的問題的答案的過程中，我發現了 \<ng-template> 的概念。 令我驚訝的是，還有另一個容易混淆的概念： *ngTemplateOutlet。 我開始了我的旅程，尋求對兩個概念的澄清，但現在我有四個，聽起來幾乎一樣！

你遇到過這種情況嗎？ 如果是，那麼您來對地方了。 因此，事不宜遲，讓我們一一介紹。

# 1. \<ng-template>

顧名思義，\<ng-template> 是一個模板元素，Angular 與結構指令（*ngIf、*ngFor、[ngSwitch] 和自定義指令）一起使用。

這些模板元素僅在存在結構指令時才起作用。 Angular 將宿主元素（指令所應用到的元素）包裝在 \<ng-template> 中，並透過用診斷註釋(diagnostic comments)替換它來使用完成的 DOM 中的 \<ng-template>。

考慮一個簡單的 *ngIf 示例：

![](https://img-blog.csdnimg.cn/img_convert/80ac51b788951f767d0ceaae032dd1ff.png)

上面顯示的是 *ngIf 的 Angular 解釋，也就是解除語法糖之後的實際程式碼。 Angular 將應用指令的宿主元素放在 \<ng-template> 中，並保持宿主原樣。 最終的 DOM 類似於我們在本文開頭看到的：

![](https://img-blog.csdnimg.cn/img_convert/261d8e2c69f485d2bb28a0d1b6842519.png)

# 2. \<ng-container>

![](https://img-blog.csdnimg.cn/img_convert/2b365dae44f09fdc5004d95821c0523a.png)

我們很多人編寫這段程式碼的原因是無法在 Angular 中的單個宿主元素上使用多個結構指令。 現在這段程式碼工作正常，但如果 item.id 是一個可能不需要的虛假值，它會在 DOM 中引入幾個額外的空 \<div> 。

![](https://img-blog.csdnimg.cn/img_convert/5b9c8ba44abe003958f20af1e43bb5eb.png)

人們可能不會關心像這樣的簡單示例，但是對於具有複雜 DOM（顯示數萬個資料）的大型應用程式，這可能會變得很麻煩，因為元素可能具有附加到它們的偵聽器，這些偵聽器仍然存在於 DOM 監聽事件。

更糟糕的是應用樣式 (CSS) 必須執行的巢狀級別！

不用擔心，我們有 \<ng-container> 來救援！

Angular \<ng-container> 是一個不會干擾樣式或佈局的分組元素，因為 Angular 不會將它放在 DOM 中。

使用 ng-container 重寫。

![](https://img-blog.csdnimg.cn/img_convert/6c4098ba44cfeb09777bdc611974751b.png)

可以理解成把 div 標籤放置到 ng-container 這個虛無的容器裡，當 div 的 *ngIf 指令布林值為 false 時，虛無的容器連同裡面的 div 標籤壓根就不會生成。

最後渲染出的 HTML 程式碼裡，沒有多餘的空 div 標籤了：
![](https://img-blog.csdnimg.cn/img_convert/f7c04b31dd32a33f439adff5ff0aced2.png)

最佳實踐：當我們只想應用多個結構指令而不在我們的 DOM 中引入任何額外元素時，我們應該使用 \<ng-container>。

# 3. \<ng-content>

它們用於建立可配置元件。 這意味著可以根據使用者的需要配置元件。 這就是眾所周知的內容投影: Content Projection. 已釋出庫中使用的元件使用 \<ng-content> 使自己可配置。

考慮一個簡單的 \<project-content> 元件，下圖是其本身的 HTML 定義：

![](https://img-blog.csdnimg.cn/img_convert/ac16143d1b55b7d9c9814fedcaac684d.png)

顯然，footer 區域允許動態配置內容。

下圖展示瞭如何為 footer 區域動態注入自定義 footer 內容。這種用法稱為單一投射。
![](https://img-blog.csdnimg.cn/img_convert/eccd34cff7a1e023d3c0dbd161e26faa.png)

\<project-content> 元件的開始和結束標記中傳遞的 HTML 內容就是要投影的內容。 這就是我們所說的內容投影。 內容將在提供內容投影功能元件內的 \<ng-content> 內呈現。

這允許 \<project-content> 元件的使用者在元件內傳遞任何自定義頁尾並準確控制他們希望如何呈現它。

# Multiple Projections

如果您可以決定哪些內容應該放在什麼地方呢？ 除了將每個內容投影到單個 \<ng-content> 中之外，您還可以使用 \<ng-content> 的 select 屬性控制內容的投影方式。 它需要一個元素選擇器來決定在特定的 \<ng-content> 中投射哪些內容。

就是這樣：

![](https://img-blog.csdnimg.cn/img_convert/f93bde93eeaec7c7e62e8226049ab364.png)

我們修改了 \<project-content> 定義以執行多內容投影。 select 屬性選擇將在特定 <ng-content> 中呈現的內容型別。 這裡我們首先選擇渲染標題 h1 元素。 如果投影內容沒有 h1 元素，它將不會呈現任何內容。 同樣，第二個選擇查詢 div。 其餘內容在最後一個 \<ng-content> 中呈現，沒有選擇。

如何消費這個帶有 select 屬性的，允許多重投射的元件？方法如下所示：

![](https://img-blog.csdnimg.cn/img_convert/173bdeed46d66ee45ee1d1bd4933ba2b.png)

# 4. *ngTemplateOutlet

*ngTemplateOutlet 用於兩種場景：

* 在檢視的各個部分插入一個通用模板，而不考慮迴圈或條件
* 製作高度配置的元件。

## 模板重用

考慮一個檢視，您必須在多個位置插入模板。 例如，要放置在網站中的公司徽標。 我們可以透過為徽標編寫一次模板並在檢視中的任何地方重用它來實現它。

以下是程式碼片段：

![](https://img-blog.csdnimg.cn/img_convert/a53a00c77713bd925ac0c942ec94bc98.png)

如您所見，我們只編寫了一次徽標模板，並在同一頁面上使用一行程式碼將其使用了 3 次！

## Customizable components

*ngTemplateOutlet 的第二個用例是高度定製的元件。 考慮我們之前的 \<project-content> 元件示例，並進行了一些修改：

![](https://img-blog.csdnimg.cn/img_convert/ed36e2e0078ab3d25f2aabae3c8d8f70.png)

以上是 \<project-content>元件的修改版本，它接受三個輸入屬性 —— headerTemplate、bodyTemplate、footerTemplate。 以下是 project-content.ts 的片段：
![](https://img-blog.csdnimg.cn/img_convert/ade07cfb4926e59361acda9285398da7.png)

模板檔案裡使用到的 input 屬性，headerTemplate，bodyTemplate 和 footerTemplate 屬性定義在 Component 檔案裡。

我們在這裡試圖實現的是顯示從 \<project-content> 的父元件接收到的頁首、正文和頁尾。 如果未提供其中任何一個，我們的元件將在其位置顯示預設模板。 因此，建立了一個高度定製的元件。

要使用我們最近修改的元件：

![](https://img-blog.csdnimg.cn/img_convert/c1dc25bd9e375ab92ee0d8cec7f840b1.png)

這就是我們將模板引用傳遞給我們的元件的方式。 如果其中任何一個未透過，則元件將呈現預設模板。

# ng-content vs. *ngTemplateOutlet

它們都可以幫助我們實現高度定製化的元件，但選擇哪個以及何時選擇？

可以清楚地看到，如果沒有提供， *ngTemplateOutlet 為我們提供了更多顯示`預設模板`的能力。

這不是 ng-content 的情況。 它按原樣呈現內容。 您最多可以在 select 屬性的幫助下拆分內容並在檢視的不同位置呈現它們。 您不能有條件地呈現 ng-content 中的內容。 您必須顯示從父級收到的內容，而無法根據內容做出決定。

但是，在兩者中進行選擇完全取決於您的用例。 至少現在我們的武器庫中有一個新武器 *ngTemplateOutlet，除了 ng-content 的功能外，它還提供了對內容的更多控制！
                        </project-content></project-content></project-content></ng-content></ng-content></project-content></ng-content></ng-content></ng-content></project-content></ng-content></project-content></project-content></ng-content></ng-content></ng-container></ng-container></ng-container></div>
                                        <p style="clear:both;"></p>
                    <p class="translate">
                                                    來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2781875/，如需轉載，請註明出處，否則將追究法律責任。
                                            </p>

</ng-container></ng-template></ng-template></ng-template></ng-template></ng-template></ng-template></ng-content></ng-container></ng-container>

一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的區別

相關文章