ng-template: As the name suggests the ng-template is a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch] and custom directives).

模板元素，伴隨著Angular結構化指令比如*ngIf, *ngFor和ngSwitch等一起使用。

Angular wraps the host element (to which the directive is applied) inside ng-template and consumes the ng-template in the finished DOM by replacing it with diagnostic comments.

結構化指令施加的元素稱為host元素，host元素被ng-template包裹，當Angular渲染頁面時，會消費ng-template, 并在最終生成的DOM元素中加上一些diagnostic comment.

例子：

這個id為emotyList的ng-template，出現在structual directive *ngIf里，

host元素p被ng-template包裹：

另一個例子：

最后生成的原生html頁面：

注意，如果ng-template沒有配合structural指令而是單獨使用，則host元素最后不會渲染出來。看個例子：

最后渲染的原生html頁面，里面什么也沒有：

以下兩種方法能夠讓go home通過ng-template被顯示：

其中方法1使用了解糖之后的原始ngIf指令，此時Angular只會簡單將ng-template替換成comment，而ng-template內的內容原封不動地出現在最后的HTML頁面中。

In this method, you are providing Angular with the de-sugared format that needs no further processing. This time Angular would only convert ng-template to comments but leaves the content inside it untouched (they are no longer inside any ng-template as they were in the previous case). Thus, it will render the content correctly.

參考鏈接：Everything you need to know about ng-template, ng-content, ng-container, and *ngTemplateOutlet in Angular

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular ng-template元素的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。