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

問題描述

我在 div 標簽頁里使用 ngTemplateOutlet 給代碼第 11 行的 div 標簽動態傳入了一個新的模板實例，該實例通過變量 inputTemplate 代表。

運行時，我發現第 11 行的 div 標簽，完全被傳入的 inputTemplate 變量代表的模板實例所替換——原來那個具有 wrapper2 class 的 div 標簽完全消失了。

同時另一個附帶發現，將 div 替換成 ng-content 以及 ng-container，最后的效果完全沒有區別。似乎 ngTemplateOutlet 會將指向的模板實例的 layout，完全替換施加了 ngTemplateOutlet 的 wrapper 元素。

問題分析

在 core.js 的 templateRef.createEmbeddedView 設置斷點：

斷點觸發后，切換到 elements 標簽頁，發現第二個 div 標簽根本就不可見。

再在下列代碼里設置斷點，也就是 Angular bootstrap 階段，讓其暫停下來：

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

此時的 HTML 頁面：

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

我們可以關注這段代碼的生成時機：

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

這里執行 template input 的內聯 HTML 模板：

使用函數 ??property 更新一個 HTML element 的 property：

屬性名稱，就是 div 上施加的結構性指令 ngTemplateOutlet，value 就是通過 @Input 傳入的類型為 TemplateRef 的模板實例：

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

解決方法

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

總結

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

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