Угловой элемент уничтожается в группе мат-вкладок при добавлении новой вкладки

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 были созданы как компоненты угловых элементов (как описано в этого руководства .

Весь код включен Github .

Ожидаемый результат должен быть тем, что происходит на первом шаге, добавляется новая вкладка с компонентом в его содержимом, но она уничтожается при добавлении новой.

Тест в реальном времени включен https://tpv.osumi.es

Спасибо !!

Answer 1

Поскольку отправка в массив запускает обнаружение изменений, и ваши вкладки не отслеживаются должным образом, поэтому среда перерисовывает их.

Попробуйте использовать пользовательский трек по функции:

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

В вашем TS

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