gpt4 book ai didi

routing - 带有动态选项卡的角度路由

转载 作者:行者123 更新时间:2023-12-05 07:17:33 34 4
gpt4 key购买 nike

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

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

要求组件隐藏,切换标签时不销毁,以保持组件状态。

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

保留状态并让顶层按预期工作的一种方法是绕过以移除路由器 socket

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

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

最佳答案

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

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

使用自定义策略,您可以在不破坏不需要的组件的情况下分离然后重新附加它。

关于routing - 带有动态选项卡的角度路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58752888/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com