問題描述

本文涉及到的代碼位置：https://github.com/wangzixi-diablo/ngDynamic

ng-container 和 ngTemplateOutlet 的配合使用。

<ng-container [ngTemplateOutlet]="content.templateRef"></ng-container>

這里需要接受一個類型為 TemplateRef 的輸入：

content.templateRef 在哪里賦的值？

使用了 ContentChild 這個 content query：

在運行時，content 的值為施加了 ZippyContentDirective 的 ng-template 代表的 TemplateRef 實例。

這個 Directive 對應的選擇器為：appExampleZippyContent

因此也就是下圖這個模板：

我期望最終運行時，能夠在頁面看到上圖模板變量的值被內容投影到 app-example-zippy 內部。

然而實際結果是：

控制臺有錯誤報出：

ERROR TypeError: Cannot read properties of undefined (reading ‘templateRef’)
at ZippyComponent_div_1_Template (template.html:3:19)
at executeTemplate (core.js:7511:9)
at refreshView (core.js:7380:13)
at refreshEmbeddedViews (core.js:8481:17)
at refreshView (core.js:7404:9)
at refreshComponent (core.js:8527:13)
at refreshChildComponents (core.js:7186:9)
at refreshView (core.js:7430:13)
at refreshComponent (core.js:8527:13)
at refreshChildComponents (core.js:7186:9)

問題分析

單擊 template.html 進入具體引起錯誤的代碼位置：

自動導航到上圖第三行：content.templateRef, 運行時 content 的值為undefined，因為試圖訪問 undefined 的 templateRef 屬性，所以報錯。

content 的值為空，說明下圖 content query 執行失敗了：

@ContentChild(ZippyContentDirective)

我在這個自定義 Directive 的構造函數里設置了斷點，但是運行時斷點根本就未觸發，這只能說明，Angular 框架根本就沒有識別出該 Directive：

究其原因，在自定義 Directive 所在的 NgModule 定義的 declarations 區域里，沒有將該自定義 Directive 添加進去。

將上圖21行代碼取消注釋之后，自定義 Directive 的構造函數立即被調用了：

注意這里的調用上下文：當自定義 Directive 被添加到 NgModule 的 declarations 區域后，一旦模板解析邏輯檢測到該 Directive，就會調用 Angular 的依賴注入相關框架代碼，自動生成 Directive 實例:

if (isDirectiveHost(tNode)) {createDirectivesInstances(tView, lView, tNode);}

總結

本文采取的自定義 Directive，本質上是一個 anchor，用于定位將要被內容投影的模板實例 TemplateRef.

使用 TemplateRef，組件可以使用 ngTemplateOutlet 指令或 ViewContainerRef 方法 createEmbeddedView() 呈現引用的內容。

總結

以上是生活随笔為你收集整理的Angular 内容投影 content projection 关于条件渲染问题的单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

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