Angular Elements导出Web组件嵌套时受*ngIf指令影响异常求助

问题结论 #

这个问题是Angular Elements的生命周期设计特性导致的，不属于Angular核心框架缺陷，也不是操作失误。

问题原因 #

• 当使用*ngIf控制投影内容显隐时，*ngIf取值为false会直接将投影的DOM节点从文档流中移除，此时子Web组件会触发disconnectedCallback，Angular Elements默认会在这个钩子中销毁对应的Angular组件实例，所有已经赋值的输入属性也会被同步清除。
• 当*ngIf重新变为true时，DOM节点被插回文档流，子Web组件触发connectedCallback，会新建一个全新的Angular组件实例，但Angular Elements默认只会在组件首次初始化时读取HTML标签上的静态属性同步到组件输入值，重新初始化时不会重新读取这些静态属性，所以你写的items="A,B,C"没有被同步到新的组件实例，导致组件无内容渲染。
• 纯Angular环境下没有这个问题，是因为纯Angular的内容投影中子组件实例由Angular框架统一管理，*ngIf移除容器时不会销毁子组件实例，属性状态会被保留。

可行解决方案 #

• 优先推荐你已经验证过的方案：替换*ngIf为样式控制显隐，比如给容器加[style.display]="childVisible ? 'block' : 'none'"，或者用[hidden]="!childVisible"，这种方式不会移除DOM节点，子组件实例不会被销毁，自然不会丢失属性。
• 如果你必须使用*ngIf控制显隐，可以修改子Web组件的导出逻辑，重写NgElement的connectedCallback钩子，每次组件被插入DOM时主动读取当前标签上的所有HTML属性，同步到组件的输入属性中即可解决。
• 也可以将静态属性传值改为动态绑定传值，在父组件中保留属性值，每次子组件重新挂载后重新传入即可。

内容的提问来源于stack exchange，提问作者Andreas E