本文描述的應(yīng)用代碼地址：https://github.com/wangzixi-diablo/ngDynamic

問題描述

我在 div 標(biāo)簽頁里使用 ngTemplateOutlet 給代碼第 11 行的 div 標(biāo)簽動態(tài)傳入了一個(gè)新的模板實(shí)例，該實(shí)例通過變量 inputTemplate 代表。

運(yùn)行時(shí)，我發(fā)現(xiàn)第 11 行的 div 標(biāo)簽，完全被傳入的 inputTemplate 變量代表的模板實(shí)例所替換——原來那個(gè)具有 wrapper2 class 的 div 標(biāo)簽完全消失了。

同時(shí)另一個(gè)附帶發(fā)現(xiàn)，將 div 替換成 ng-content 以及 ng-container，最后的效果完全沒有區(qū)別。似乎 ngTemplateOutlet 會將指向的模板實(shí)例的 layout，完全替換施加了 ngTemplateOutlet 的 wrapper 元素。

問題分析

在 core.js 的 templateRef.createEmbeddedView 設(shè)置斷點(diǎn)：

斷點(diǎn)觸發(fā)后，切換到 elements 標(biāo)簽頁，發(fā)現(xiàn)第二個(gè) div 標(biāo)簽根本就不可見。

再在下列代碼里設(shè)置斷點(diǎn)，也就是 Angular bootstrap 階段，讓其暫停下來：

bootstrapModule(moduleType, compilerOptions = []) {const options = optionsReducer({}, compilerOptions);return compileNgModuleFactory(this.injector, options, moduleType).then(moduleFactory => this.bootstrapModuleFactory(moduleFactory, options));}

此時(shí)的 HTML 頁面：

僅僅包含了 app-ng-template，也就是 app.module.ts 里指定的 bootstrap Component：

我們可以關(guān)注這段代碼的生成時(shí)機(jī)：

<!--bindings={"ng-reflect-ng-template-outlet": "[object Object]" }-->

這里執(zhí)行 template input 的內(nèi)聯(lián) HTML 模板：

使用函數(shù) ??property 更新一個(gè) HTML element 的 property：

屬性名稱，就是 div 上施加的結(jié)構(gòu)性指令 ngTemplateOutlet，value 就是通過 @Input 傳入的類型為 TemplateRef 的模板實(shí)例：

我們最后在 Chrome 開發(fā)者工具 elements 標(biāo)簽頁里看到的字段 ng-reflect-ng-template-outlet 的值，實(shí)際上就是 value.toString() 調(diào)用的返回結(jié)果。

解決方法

如果不希望施加 ngTemplateOutlet 的元素消失，可以仿照本文 wrapper div，在 host 元素外層再包一層 div 元素即可，如下圖所示：

總結(jié)

以上是生活随笔為你收集整理的关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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