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

問題描述

我使用如下代碼，期望在使用 *ngTemplateOutlet 指令動態創建 template 實例時，能夠進行參數傳遞：

<ng-template #inputTemplateWithContent let-param let-name="name"><div>參數1: {{param}}</div><div>參數2: {{name}}</div> </ng-template><ng-container *ngTemplateOutlet="inputTemplateWithContent; context: myContext"></ng-container> <br>

傳遞的參數 myContext 定義在 Component class 里：

問題在于，運行時第一個 div 元素里，顯示的值是空的：

問題分析

我們還是采取單步調試的方式來查找問題：

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

comment 元素采取 createComment 方法創建：

node_value 是 container，這也是最后在 Chrome 開發者工具 elements 標簽頁里觀察到的 container：

動態創建了 div 元素：

這個 div 元素目前還是空的：

也就是 ng-template 里被包裹的元素：

上述代碼被執行后，我們在 Chrome 開發者工具里看到了一個空的 div 標簽：

同理，第二個 div 標簽也生成了：

我們可以使用一個小技巧：將 myContext 替換成一個 get 函數，這樣我們就可以在 get 函數里設置斷點進行調試，從而找到 template 上下文參數傳遞的準確代碼位置了。

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

如圖：

解決方案

將模板變量參數傳遞修改為如下代碼：

<ng-template #inputTemplateWithContent let-param11="param" let-name="name"><div>參數1: {{param11}}</div><div>參數2: {{name}}</div> </ng-template>

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

總結

以上是生活随笔為你收集整理的ng-template 使用过程中参数传递错误的单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

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