javascript - 當新增標籤頁時，Angular 元素在 mat-tab-group 上被銷毀

我有一個 mat-tab-group，它是從一個陣列填充的。我會動態地向這個陣列添加新項目，而標籤的內容是 Angular 元件。

當我添加一個新元素時，一切運作正常，我也能看到新增的元素，但當我再添加一個新元素時，之前的元素會被銷毀，標籤頁內容會顯示為空。

我已經檢查了一個元素在被添加時的情況，我看到它運作得很完美，但當我添加一個新元素時，我可以看到之前的元素從 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 組件（如本指南中所述）。

所有代碼都在 Github 上。

預期結果應該是第一步發生的情況，新分頁會被新增，內容中包含該元件，但在新增新分頁時，它會被銷毀。

實時測試在 https://tpv.osumi.es

謝謝!!

答案＃1

因為推入陣列會觸發變更檢測，而你的分頁沒有被正確追蹤，所以框架會重新渲染它們。

嘗試使用自訂曲目功能：

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

在你的 TS 中

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