# 問題描述

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

`ng-container` 和 `ngTemplateOutlet` 的配合使用。

```html
<ng-container></ng-container>
```

這裡需要接受一個型別為 `TemplateRef` 的輸入：

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

content.templateRef 在哪裡賦的值？

使用了 `ContentChild` 這個 `content query`：

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

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

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

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

因此也就是下圖這個模板：
![](https://img-blog.csdnimg.cn/img_convert/7401db2b6f361c930feee835248fe7fb.png)

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

然而實際結果是：

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

控制檯有錯誤報出：

> 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` 進入具體引起錯誤的程式碼位置：

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

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

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

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

```typescript
@ContentChild(ZippyContentDirective)
```

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

我在這個自定義 Directive 的建構函式里設定了斷點，但是執行時斷點根本就未觸發，這隻能說明，Angular 框架根本就沒有識別出該 Directive：
![](https://img-blog.csdnimg.cn/img_convert/f28b846bbd8bc20de8bb8ea645196679.png)

究其原因，在自定義 Directive 所在的 NgModule 定義的 `declarations` 區域裡，沒有將該自定義 Directive 新增進去。

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

將上圖21行程式碼取消註釋之後，自定義 Directive 的建構函式立即被呼叫了：

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

注意這裡的呼叫上下文：當自定義 Directive 被新增到 `NgModule` 的 `declarations` 區域後，一旦模板解析邏輯檢測到該 Directive，就會呼叫 Angular 的依賴注入相關框架程式碼，自動生成 Directive 例項:

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

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

```typescript
 if (isDirectiveHost(tNode)) {
        createDirectivesInstances(tView, lView, tNode);
    }
```
# 總結

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

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

Angular 內容投影 content projection 關於條件渲染問題的單步除錯

相關文章