关于施加在|关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
本文描述的应用代码地址：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：
文章图片
我们可以关注这段代码的生成时机：
文章图片
这里执行 template input 的内联 HTML 模板：
文章图片
使用函数
??property 更新一个 HTML element 的 property：【关于施加在|关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试】
文章图片
属性名称，就是 div 上施加的结构性指令
ngTemplateOutlet，value 就是通过 @Input 传入的类型为 TemplateRef 的模板实例：
文章图片
我们最后在 Chrome 开发者工具 elements 标签页里看到的字段 ng-reflect-ng-template-outlet 的值，实际上就是
value.toString() 调用的返回结果。
文章图片
解决方法 如果不希望施加 ngTemplateOutlet 的元素消失，可以仿照本文 wrapper div，在 host 元素外层再包一层 div 元素即可，如下图所示：
文章图片
推荐阅读
- 关于|关于 ng-template 通过 @input 传入另一个 Component 不能工作的问题调试
- 数字孪生在城市热力基础设施中的应用
- 学习笔记|关于马尔可夫过程的一些学习笔记
- 关于HashSet与HashMap
- 关于C#中GUI编程的标准事件问题
- 关于OpenHarmony你了解多少（）
- 自我总结|关于LSTM小白的一些心得
- Spring事务失效的一种原因关于this调用的问题
- 关于golang监听rabbitmq消息队列任务断线自动重连接的问题
- 关于非易失性存储器FRAM的常见问题解答