Question

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

上述解决方案的问题在于，当隐藏选项卡时，内容组件将被破坏。

为了保持组件状态，需要隐藏组件，并且在切换选项卡时不要破坏组件。

在ngb-tabset上设置destroyOnHide属性会导致存在多个路由器出口，并且不起作用。

保持状态并按预期进行顶层工作的一种方法是绕过以移除路由器出口

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

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

Answer 1

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

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

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

带动态选项卡的角形布线

1 个答案: