本文涉及到的程式碼，位於這個 Github 倉庫：https://github.com/wangzixi-diablo/ngDynamic

# 問題描述

我使用如下程式碼進行 ng-template 模板的引數傳遞：

```html
<ng-template let-param="" let-name="name">
    <div>引數1: {{param}}</div>
    <div>引數2: {{name}}</div>
</ng-template>
```

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

這裡對於上圖的程式碼位置 2，我用關鍵字 `let-`，定義了一個僅模板裡能夠訪問的區域性變數 `name`，其資料來源來自傳入該模板的上下文物件 context 的同名屬性 `name`。

而對於程式碼位置1 處的 param，我沒有指定其對映到上下文物件中的屬性名，因此我期望它使用上下文物件裡的預設`同名`屬性，因此最後第一個 div 元素裡應該顯示屬性 `param` 的值：`預設值`。

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

然而實際的執行結果卻是，第一個 div 元素顯示的值為空：

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

# 問題分析

這個問題的根源是如何將上下文物件裡的某個屬性作為`預設`屬性，傳遞給模板。

在 Angular [官網](https://angular.io/api/common/NgTemplateOutlet)裡找到了這樣的關於預設值的文件：

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

上下文物件的準確含義：

> 附加到 EmbeddedViewRef 的上下文物件。 這應該是一個 JSON 物件，該物件的鍵將可用於本地模板 let 宣告的繫結。 在上下文物件中使用鍵 $implicit 會將其值設定為預設值。

文件提到，預設屬性應該用 `$implicit` 來標識。

我們在原始碼里根據關鍵字 `$implicit` 搜尋，找到了常量 `IMPLICIT_REFERENCE`，再根據該常量搜尋，就能找到 Angular 框架原始碼解析 `$implicit` 之處：

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

這裡我們就能找到 Angular 解析 template variable 的邏輯：

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

`InterpolationConfig` 的 start 和 end 符號：`{{`, `}}`

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

# 解決方案

將下圖圖例1位置處的 `param` 修改成 `$implicit` 即可：

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

# 總結

從下面這個呼叫棧裡還能觀察到模板裡包含的 HTML 元素，在記憶體中對應的 DOM 節點：

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

ng-template, ng-container 和 br，分別對應 HTML 檔案裡下面三個元素：

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

ng-template 使用過程中預設引數不能按照期望工作的問題單步除錯

相關文章