页面内的Ionic选项卡

Question

我有一个Ionic 3 Angular应用程序，我正试图升级到Ionic 6。该应用程序本身没有标签，但其中有一些页面有标签。

一个简化的例子:

foo.html:

<ion-header>
<!-- insert header here -->
</ion-header>
<ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="guide">
<ion-icon md="map-sharp" ios="map"></ion-icon>
<ion-label>Guide</ion-label>
</ion-tab-button>
<ion-tab-button tab="scan">
<ion-icon name="barcode-sharp"></ion-icon>
<ion-label>Scan</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>

问题是如何安排它，以便在打开foo时，foo页面加载，包含guide页面，并且在foo页面的选项卡之间切换不卸载该页面。

(我没有麻烦让foo设置选项卡为guide;问题是如何使路由器正常工作

我尝试过的事情和为什么它们不起作用:

• 使用UrlHandlingStrategy只查看最后一个组件;导致foo页面完全被guide页面所取代，页眉和标签栏也消失了。

• foo/guide路由到GuidePage;guide.html包含ion-virtual-scroll元素，它抱怨ChunkLoadError，因为它试图从/foo/[snip]ion-virtual-scroll[snip].js加载块。同样，这也可能因为同样的原因而失败。

有什么好的方法来做到这一点吗?

Answer 1

有多种方法这个，我会举一些例子，但我首先想到的是:

• 使用查询参数以处理活动选项卡并具有唯一路由

• 使用页面中的第二个路由器，用于处理页

这类似于您试图实现https://ionicframework.com/docs/angular/navigation#child-routes-within-tabs，这似乎实际上是相似的，使用子路由

让我知道，我可以做一个快速的例子，以防万一在stackblitz如果你在挣扎，或者如果这对你不起作用