本文形容的利用代码地址：https://github.com/wangzixi-d…

问题形容

我在 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 元素即可，如下图所示：