*ngTemplateOutlet is used for two scenarios?—?to insert a common template in various sections of a view irrespective of loops or condition and to make a highly configured component.

將同一個 template 插入到一個視圖不同的 sections 中。

例如，將 id 為 compantLogoTemplate 的模板，插入到同一個視圖的不同位置去。也就是說，ngTemplateOutlet 的值是模板 id, 用 # 標識。

ngTemplateOutlet 也可以接收一些上下文參數(shù)：

這里 ngTemplateOutlet 傳入的值不再是硬編碼的模板 id ，而是 Component 屬性 headerTemplate, bodyTemplate和 footerTemplate.

這些值需要消費者傳入，因此在 Component 里定義 headerTemplate，bodyTemplate 等等時，需要加上@Input 的注解。

最后的消費代碼：

Angular ngTemplateOutlet和 ng-content 的區(qū)別

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

二者都能幫助 Angular 開發(fā)者實現(xiàn)高度可定制化的Component.

ng-content 只是簡單地將消費者傳入的內容進行顯示。無法使用 ng-content 進行形如 ngTemplateOutlet 那樣的條件渲染。

You have to show the content that is received from the parent with no means to make decisions based on the content.

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結

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

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