页面内的离子标签

Question

赏金将在 23 小时后到期。 此问题的答案有资格获得+50声望赏金。 NoLongerBreathedIn想提请更多关注这个问题：

将测试每个答案，首先工作获得赏金。

我有一个 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页面完全替换，并且标题和标签栏消失了。

• 有到GuidePage的foo/guide路线； 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 ，这似乎实际上是相似的，使用子路由

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