2

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

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

我root在 an 上尝试了一个属性，ion-tab但它抛出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.

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

4

2 回答 2

0

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>
于 2018-04-13T08:00:02.773 回答
0

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

于 2018-04-13T04:04:15.673 回答