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

# 問題描述

我在 div 標籤頁裡使用 `ngTemplateOutlet` 給程式碼第 11 行的 div 標籤動態傳入了一個新的模板例項，該例項透過變數 `inputTemplate` 代表。

![](https://img-blog.csdnimg.cn/img_convert/7ecefaca429d8153e121cca4247057b9.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/1f07e1ed825d55e759ae5ff879feabe8.png)

# 問題分析

在 core.js 的 `templateRef.createEmbeddedView` 設定斷點：

![](https://img-blog.csdnimg.cn/img_convert/f4ccac61ac0b34465c458912f9f156f2.png)

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

![](https://img-blog.csdnimg.cn/img_convert/18c0c28ba3407f65a2ff8033b4330174.png)

再在下列程式碼裡設定斷點，也就是 Angular bootstrap 階段，讓其暫停下來：

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

![](https://img-blog.csdnimg.cn/img_convert/14618497612596f8171e236d6dcdc5a8.png)

此時的 HTML 頁面：
![](https://img-blog.csdnimg.cn/img_convert/2528106f9aee168901769ea594871bc0.png)

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

![](https://img-blog.csdnimg.cn/img_convert/8541cc5e948c2a3f09548655ae0a5ea4.png)

我們可以關注這段程式碼的生成時機：
```html

```

![](https://img-blog.csdnimg.cn/img_convert/10b4498931b46e3814511da87500aca2.png)

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

![](https://img-blog.csdnimg.cn/img_convert/0e2147b59ea051b366b7d43a34ffca95.png)

使用函式 `ɵɵproperty` 更新一個 HTML element 的 `property`：

![](https://img-blog.csdnimg.cn/img_convert/9e7bd53fd80b9f67a4bb335af059223d.png)

屬性名稱，就是 div 上施加的結構性指令 `ngTemplateOutlet`，value 就是透過 @Input 傳入的型別為 TemplateRef 的模板例項：
![](https://img-blog.csdnimg.cn/img_convert/17410880881316e4b78986c80925a747.png)

我們最後在 Chrome 開發者工具 elements 標籤頁裡看到的欄位 ng-reflect-ng-template-outlet 的值，實際上就是 `value.toString()` 呼叫的返回結果。

![](https://img-blog.csdnimg.cn/img_convert/34227c41c61c12b31347dbe76178ab8c.png)

# 解決方法

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

![](https://img-blog.csdnimg.cn/img_convert/97cf2933c6243f65adef391c7b32a0bf.png)

關於施加在 div 標籤上的 ngTemplateOutlet 指令讓 div class 丟失的問題除錯

相關文章