应用程序标签在 Stencil + Ionic4 beta 中与离子标签一起使用

Question

我已经通过Ionic PWA Toolkit 使用并检查了 Stencil.js 和 Ionic4，它们目前处于 beta 版本。 Ionic4 目前还没有文档，因为它还没有发布。

当一个标签项被点击时，如何显示其对应的页面，该页面可能是另一个组件，即。只是正常的标签行为？

我在ion-tab 上尝试了root 属性，但它抛出IonTabAttributes 不包含root，所以我认为它已被弃用和更改。

main.tsx文件的render函数：

render() {
    return (
      <ion-app>
        <main>
          <ion-tabs>
            <ion-tab icon="home"></ion-tab>
            <ion-tab icon="document"></ion-tab>
            <ion-tab icon="pie"></ion-tab>
            <ion-tab icon="calendar"></ion-tab>
          </ion-tabs>
        </main>
      </ion-app>
    );
  }

我可以使用stencil-router，但是，使用 `ion-tabs 时似乎有点反模式。

有一些介绍性的视频教程，而不是书面文章如何使用它，但它们非常基础，不包括标签的使用。

Answer 1

将内容放在每个 ion-tab 中。内容可以是文本或组件。

Answer 2

Ionic 现在将使用angular router。它将利用有角的路由器插座。对于选项卡式应用程序标记，每个选项卡都将提供一个named router outlet。

选项卡本身并不是一个路由器插座，这意味着每个选项卡都需要包含自己的子插座来实现导航。路由会这样定义

const routes: Routes = [
 {
    path: 'tabs',
    component: TabsPage,
    children: [
      { // tab one
        path: 'schedule',
        component: SchedulePage,
        outlet: 'schedule'
      },
      { // tab two
        path: 'speakers',
        component: SpeakerListPage,
        outlet: 'speakers'
      },
      { // tab three
        path: 'map',
        component: MapPage,
        outlet: 'map'
      }
   ]
  }
];

标记：

<ion-tabs>

    <ion-tab tabTitle="Schedule" href="/app/tabs/(schedule:schedule)">
      <ion-router-outlet name="schedule"></ion-router-outlet>
    </ion-tab>

    <ion-tab tabTitle="Speakers" href="/app/tabs/(speakers:speakers)">
      <ion-router-outlet name="speakers"></ion-router-outlet>
    </ion-tab>

    <ion-tab tabTitle="Map" href="/app/tabs/(map:map)">
      <ion-router-outlet name="map"></ion-router-outlet>
    </ion-tab>

</ion-tabs>