Angular ng-if 指令破坏了使用 Angular 元素导出的 Web 组件

Question

我会拼命寻求帮助来检查这是否是 Angular 问题、Angular 元素问题或我引起的问题。

介绍

在我们的客户项目中，我们借助 Angular 元素将组件导出为 Web 组件。在某些用例中，我面临着将一个 Web 组件堆叠在另一个 Web 组件内的问题。让我通过向您提供我推送到 github 的测试项目的片段来详细介绍：https://github.com/aetzlecx/angular-elements-stacking/（测试项目非常简化，仅演示问题并省略其他不必要的细节或项目相关细节）

旁注：我在 Angular 版本 10、11 和 12 上尝试过此操作；）。

父组件

父组件使用内容投影在 的帮助下包含子组件ng-content。按钮只需切换子内容：

<button (click)="triggerButtonClicked()">Toggle</button>

<p>Child content:</p>
<div *ngIf="childVisible">
  <ng-content></ng-content>
</div>

export class ParentComponent {
  childVisible = true;
  triggerButtonClicked(): void {
    this.childVisible = !this.childVisible;
  }
}

在 Angular 应用程序内部，当我将一个元素堆叠到组件中时，它可以正常工作，没有任何问题，并且单击按钮会使子内容按预期切换。

子组件

然而，当我现在也将其他 Angular 组件导出为 Web 组件并将它们堆叠在父组件下时，我会遇到以下测试代码的困难。wc-child只是一个在无序列表 ( ul> li) 中显示给定项目的组件。然而，Web 组件的类型并不重要（简单组件与复杂组件）。

第一个用例：

<wc-parent>
  <wc-child items="A,B,C"></wc-child>
</wc-parent>

这会导致 Web 组件在第二次切换后消失。

演示第一个用例

DOM 看起来像这样：

DOM 第一个用例

第二个用例：将 Web 组件包装在 div 中：

<wc-parent>
  <div>
    <wc-child items="A,B,C"></wc-child>
  </div>
</wc-parent>

此示例导致 Web 组件的内容在第一次切换后立即消失：

演示第一个用例

DOM 看起来与第一个示例非常相似

调试尝试

我的调试尝试的详细信息：

• display当我尝试通过将属性设置为或者block来切换组件时，none它工作得很好。
• 到目前为止，我还所做的是删除@angular/elements依赖项并将元素代码复制到我的项目中并浏览元素代码。我发现基本上NgElement实现了整个 Web 组件的生命周期过程，即disconnectedCallback销毁组件并connectedCallback再次初始化它。我可以在 Chrome 开发工具中看到，在第一次切换后，组件不再设置该属性（例如，通过调用document.querySelector('wc-child').itemswhich 评估 then 到undefined）

如有任何帮助，我们将不胜感激:)

非常感谢干杯