添加新选项卡时，Angular Element 在 mat-tab-group 上被破坏

Question

我有一个从数组中填充的 mat-tab-group。我动态地将新项目添加到数组中，选项卡的内容是 Angular Elements 组件。

当我添加一个新元素时，一切正常，我看到添加了新元素，但我添加了一个新元素，前一个元素被破坏并且选项卡内容显示为空。

我在添加元素时检查了它，我发现它运行良好，但是当我添加一个新元素时，我可以看到前一个元素从 DOM 中消失了。

我尝试将常规文本而不是 Angular Elements 组件添加到选项卡中，一切都按预期工作，我可以在选项卡上前后移动。

标签组 HTML 是这样的：

<mat-tab-group [selectedIndex]="selectedTab">
  <mat-tab *ngFor="let tab of tabs; let i = index" [label]="tab.name">
    <div [innerHTML]="tab.content"></div>
  </mat-tab>
</mat-tab-group>

添加新标签的代码是这样的：

this.tabs.push({
  name: this.options[opt].name,
  content: this.domSanitizer.bypassSecurityTrustHtml('<osm-'+this.options[opt].content+'></osm-'+this.options[opt].content+'>')
} as MainTab);
this.selectedTab = this.tabs.length -1;

options 数组是可以添加的可能新选项卡的列表：

options = [
  {id: 1, name: 'Sell', content: 'sell'},
  {id: 2, name: 'Admin', content: 'admin'}
];

并且osm-sell 和osm-admin 组件已被创建为Angular Elements 组件（如this guide 中所述。

所有代码都在Github。

预期的结果应该是第一步发生的情况，添加了一个新选项卡，其内容中包含该组件，但在添加新选项卡时它会被破坏。

https://tpv.osumi.es 正在进行实时测试

谢谢！！

Answer 1

因为推送到数组会触发更改检测，并且您的选项卡没有被正确跟踪，所以框架会重新呈现它们。

尝试按功能使用自定义跟踪：

*ngFor="let tab of tabs; let i = index; trackBy: customTB"

在你的 TS 中

customTB(index, tab) {
  return tab.id;
}