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;
}

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

1 个答案: