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

問題描述

我使用如下代碼進(jìn)行 ng-template 模板的參數(shù)傳遞：

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

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

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

然而實(shí)際的執(zhí)行結(jié)果卻是，第一個(gè) div 元素顯示的值為空：

問題分析

這個(gè)問題的根源是如何將上下文對(duì)象里的某個(gè)屬性作為默認(rèn)屬性，傳遞給模板。

在 Angular 官網(wǎng)里找到了這樣的關(guān)于默認(rèn)值的文檔：

上下文對(duì)象的準(zhǔn)確含義：

附加到 EmbeddedViewRef 的上下文對(duì)象。 這應(yīng)該是一個(gè) JSON 對(duì)象，該對(duì)象的鍵將可用于本地模板 let 聲明的綁定。 在上下文對(duì)象中使用鍵 $implicit 會(huì)將其值設(shè)置為默認(rèn)值。

文檔提到，默認(rèn)屬性應(yīng)該用 $implicit 來標(biāo)識(shí)。

我們?cè)谠创a里根據(jù)關(guān)鍵字 $implicit 搜索，找到了常量 IMPLICIT_REFERENCE，再根據(jù)該常量搜索，就能找到 Angular 框架源代碼解析 $implicit 之處：

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

InterpolationConfig 的 start 和 end 符號(hào)：{{, }}

解決方案

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

總結(jié)

從下面這個(gè)調(diào)用棧里還能觀察到模板里包含的 HTML 元素，在內(nèi)存中對(duì)應(yīng)的 DOM 節(jié)點(diǎn)：

ng-template, ng-container 和 br，分別對(duì)應(yīng) HTML 文件里下面三個(gè)元素：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。