本文討論問題的程式碼，位於 Github：https://github.com/wangzixi-diablo/ngDynamic

# 問題描述

我的 Component 程式碼如下圖所示：

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

1. 使用依賴注入，引入 `ViewContainerRef`，從而可以使用其 `createEmbeddedView` 方法，在執行時動態建立例項。

2. 使用 `@ViewChild`，獲得該 Component HTML 原始碼裡定義的 id 為 tpl 的模板例項，型別為 `TemplateRef`。

3. Component 的 HTML 原始碼：

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

```html
<ng-template tpl="">
    <div>
        Hello, ng-template!
    </div>
</ng-template>
```
然而啟動應用，出現執行時錯誤：

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

> ERROR TypeError: Cannot read properties of undefined (reading 'createEmbeddedView')
    at ViewContainerRef.createEmbeddedView (core.js:10190:45)
    at NgTemplateComponent.push.8YnP.NgTemplateComponent.ngAfterViewInit (ng-template.component.ts:20:20)
    at callHook (core.js:3281:18)
    at callHooks (core.js:3251:17)
    at executeInitAndCheckHooks (core.js:3203:9)
    at refreshView (core.js:7451:21)
    at renderComponentOrTemplate (core.js:7494:9)
    at tickRootContext (core.js:8701:9)
    at detectChangesInRootView (core.js:8726:5)
    at RootViewRef.detectChanges (core.js:9991:9)

# 問題分析

上述呼叫上下文裡，有一個棧幀是我們應用程式的程式碼：

> ngAfterViewInit (ng-template.component.ts:20:20)

在其方法內設定斷點, 發現執行時，this.tplRef 為空。

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

在值為 undefined 的變數上呼叫 `createEmbeddedView` 導致的這個錯誤。

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

問題轉化為：`this.tplRef` 的賦值邏輯是怎樣的？

在 ngOnInit 時，這個屬性還是 undefined 狀態：

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

我們把滑鼠 hover 在 `@ViewChild` 上檢視其說明:

> 變更檢測器會在檢視的 DOM 中查詢能匹配上該選擇器的第一個元素或指令。 如果檢視的 DOM 發生了變化，出現了匹配該選擇器的新的子節點，該屬性就會被更新。

發現輸入引數是一個選擇器，本例我傳入的選擇器是 id 選擇器：`tpl`
![](https://img-blog.csdnimg.cn/img_convert/09d760dbdeabe9c89e51d88f5a113749.png)

根據 Angular 官網文件，這意味著我的 HTML 模板檔案裡，tpl 之前應該用 `#` 修飾：

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

# 解決方案

在 tpl 前新增 `#`:
![](https://img-blog.csdnimg.cn/img_convert/af3381d023c5995ccf988363aaee6b96.png)

# 總結

如果我們想進一步觀察 view query 是如何根據傳入的選擇器 `tpl`，去 dom tree 裡查詢的節點，可以新增如下程式碼，即 @ViewChild 和 set 函式搭配使用的情況。

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

```javascript
@ViewChild('tpl')
    set thisNamedoesnotMatter(v:TemplateRef<any>){
    console.log('Jerry');
    this.tplRef = v;
    }
```

透過除錯，發現 view query 的執行過程不會顯示在 Chrome 開發者工具裡，而僅僅顯示一個 dummy 的 XXX(Component 名稱)_Query 的呼叫上下文。

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

set 函式里的輸入引數 v 代表的就是 id 為 tpl 的 Template 例項。</any>

動態建立 @ViewChild 導致執行時錯誤的原因分析

相關文章