带有动态选项卡的角度路由答案

【问题标题】：Angular routing with dynamic tabs带有动态选项卡的角度路由
【发布时间】：2020-03-04 06:42:17
【问题描述】：

我正在尝试创建一个支持带有路由的动态选项卡的 Angular 应用程序。我在这里找到了这个很棒的起点 https://technology.amis.nl/2019/07/05/dynamic-tabs-with-angular-6-and-ng-bootstrap/

上述解决方案的问题是，当一个选项卡被隐藏时，内容组件被破坏了。

要求组件隐藏，切换标签时不破坏，以保持组件状态。

在 ngb-tabset 上设置 destroyOnHide 属性会导致出现多个 router-outlet，并且不起作用。

保留状态并按预期进行顶级工作的一种方法是绕过以删除路由器插座

      <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' 不起作用。

尝试使用辅助路由也失败了。由于没有手动处理路由器事件，我看不到前进的方向。任何建议表示赞赏。

【问题讨论】：

标签： routing

【解决方案1】：

我看到这个问题很老了，但无论如何我遇到了同样的问题。

不错的解决方案是使用自定义 RouteReuseStrategy。

使用自定义策略，您可以分离然后重新附加不需要的组件而不会破坏它。

【讨论】：