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

問題描述

我使用如下代碼進行 ng-template 模板的參數傳遞：

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

這里對于上圖的代碼位置 2，我用關鍵字 let-，定義了一個僅模板里能夠訪問的局部變量 name，其數據源來自傳入該模板的上下文對象 context 的同名屬性 name。

而對于代碼位置1 處的 param，我沒有指定其映射到上下文對象中的屬性名，因此我期望它使用上下文對象里的默認同名屬性，因此最后第一個 div 元素里應該顯示屬性 param 的值：默認值。

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

問題分析

這個問題的根源是如何將上下文對象里的某個屬性作為默認屬性，傳遞給模板。

在 Angular 官網里找到了這樣的關于默認值的文檔：

上下文對象的準確含義：

附加到 EmbeddedViewRef 的上下文對象。 這應該是一個 JSON 對象，該對象的鍵將可用于本地模板 let 聲明的綁定。 在上下文對象中使用鍵 $implicit 會將其值設置為默認值。

文檔提到，默認屬性應該用 $implicit 來標識。

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

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

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

解決方案

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

總結

從下面這個調用棧里還能觀察到模板里包含的 HTML 元素，在內存中對應的 DOM 節點：

ng-template, ng-container 和 br，分別對應 HTML 文件里下面三個元素：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ng-template 使用过程中默认参数不能按照期望工作的问题单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

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