Question

I have used and examined Stencil.js and Ionic4 which is currently in beta version via Ionic PWA Toolkit. Ionic4 has no docs up to that moment since it has not been released yet.

When a tab item clicked, how to show its corresponding page which is possibly another component, ie. just the normal tab behavior?

I have tried a root attribute on an ion-tab but it throws IonTabAttributes does not contain root, so it is deprecated and changed I think.

main.tsx file's render function:

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>
    );
  }

I could use stencil-router, however, it seems a little bit anti-pattern when using `ion-tabs.

There are a few introductory video tutorials rather than written articles how to use it, but they are very basic and do not cover tabs usage.

Answer 1

将内容放在每个离子标签内。内容可以是文本或组件。

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>

App tabs usage with ion-tabs in Stencil + Ionic4 beta

2 个答案: