Угловая маршрутизация с динамическими вкладками

Question

Я пытаюсь создать угловое приложение, которое поддерживает динамические вкладки с маршрутизацией. Я нашел эту отличную отправную точку здесь https://technology.amis.nl/2019/07/05/dynamic-tabs-with-angular-6-and-ng-bootstrap/

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

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

Установка атрибута destroyOnHide в ngb-tabset приводит к присутствию нескольких маршрутизаторов и не работает.

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

      <ngb-tab *ngFor="let tab of tabs ; let index = index" [id]="tab.url">
          <ng-template ngbTabTitle>
              <span>{{tab.name}}</span>
              <span (click)="closeTab(index, $event)">&times;</span>
          </ng-template>
          <ng-template ngbTabContent>
              <ng-container *ngIf='tab.url =="/movies"'>
                  <app-movies></app-movies>
              </ng-container>
              <ng-container *ngIf='tab.url && tab.url.startsWith("/songs")'>
                  <app-songs></app-songs>
              </ng-container>
          </ng-template>
      </ngb-tab>
  </ngb-tabset>

Это работает для вкладок верхнего уровня, но препятствует работе вложенной маршрутизации, например [routerLink] = '/ songs / 1' не будет работать.

Попытки использовать вторичную маршрутизацию также потерпели неудачу. Если не считать ручную обработку событий маршрутизаторов, я не мог видеть путь вперед. Любые предложения приветствуются.