带有动态选项卡的角度路由
Posted
技术标签:
【中文标题】带有动态选项卡的角度路由【英文标题】: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)">×</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' 不起作用。
尝试使用辅助路由也失败了。由于没有手动处理路由器事件,我看不到前进的方向。任何建议表示赞赏。
【问题讨论】:
【参考方案1】:我看到这个问题很老了,但无论如何我遇到了同样的问题。
不错的解决方案是使用自定义 RouteReuseStrategy。
使用自定义策略,您可以分离然后重新附加不需要的组件而不会破坏它。
【讨论】:
以上是关于带有动态选项卡的角度路由的主要内容,如果未能解决你的问题,请参考以下文章