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

# 問題描述

我使用如下程式碼，期望在使用 `*ngTemplateOutlet` 指令動態建立 template 例項時，能夠進行`引數傳遞`：

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

<ng-container context:="" mycontext=""></ng-container>
<br>
```
![](https://img-blog.csdnimg.cn/img_convert/d2a3af403cea853cd1376913cadd0f8a.png)

傳遞的引數 `myContext` 定義在 Component class 裡：
![](https://img-blog.csdnimg.cn/img_convert/499aba917f46d130036f18515814b759.png)

問題在於，執行時第一個 div 元素裡，顯示的值是空的：

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

# 問題分析

我們還是採取單步除錯的方式來查詢問題：
![](https://img-blog.csdnimg.cn/img_convert/3dea48f1912ad649fbd8eba56f1ad652.png)

因為 `ng-template` 並不會直接出現在最終渲染的 HTML 程式碼裡，而是將其內部包裹的 HTML 原生標籤，使用瀏覽器原生的 native API `appendChild`，動態插入到 DOM 樹中。如下圖所示：

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

`comment` 元素採取 `createComment` 方法建立：
![](https://img-blog.csdnimg.cn/img_convert/26d6302324540f8f382e09cd67ed15ea.png)

node_value 是 container，這也是最後在 Chrome 開發者工具 elements 標籤頁裡觀察到的 `container`：
![](https://img-blog.csdnimg.cn/img_convert/349f660d072461e608c28f0e1126266f.png)

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

動態建立了 div 元素：
![](https://img-blog.csdnimg.cn/img_convert/5d5b4827ec35faaffe62c11d9eac4d03.png)

這個 div 元素目前還是空的：
![](https://img-blog.csdnimg.cn/img_convert/afec17a38a9aa49c39e03b738747cabf.png)

也就是 `ng-template` 裡被包裹的元素：
![](https://img-blog.csdnimg.cn/img_convert/cefe3c803361f7071ee20f8f0a2e666c.png)

上述程式碼被執行後，我們在 Chrome 開發者工具裡看到了一個空的 div 標籤：
![](https://img-blog.csdnimg.cn/img_convert/40d63a81aff20f850bcaaa23dab9fd51.png)

同理，第二個 div 標籤也生成了：
![](https://img-blog.csdnimg.cn/img_convert/69559858a0086032f99ca6d05b75de5d.png)

我們可以使用一個小技巧：將 myContext 替換成一個 get 函式，這樣我們就可以在 get 函式里設定斷點進行除錯，從而找到 template 上下文引數傳遞的準確程式碼位置了。
![](https://img-blog.csdnimg.cn/img_convert/175b56a5fe717b95e25a2e832adadffb.png)

圖中高亮的上下文棧幀，直接跳轉到了我們編寫的 get 函式：

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

如圖：
![](https://img-blog.csdnimg.cn/img_convert/53890489abd566cbf687b0a4e40b1858.png)

# 解決方案

將模板變數引數傳遞修改為如下程式碼：

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

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

注意，我們使用關鍵字 `let-param11`，定義了一個新的`僅僅能在該模板內部使用的臨時變數`，`param11`.

ng-template 使用過程中引數傳遞錯誤的單步除錯

相關文章