Использование вкладок приложения с ion-вкладками в бета-версии Stencil + Ionic4

Question

Я использовал и изучил Stencil.js и Ionic4, который в настоящее время находится в бета-версии с помощью Ionic PWA Toolkit. На данный момент у Ionic4 нет документов, так как он еще не выпущен.

Когда щелкнул элемент вкладки, как показать соответствующую страницу, которая, возможно, является другим компонентом, т.е. просто нормальное поведение вкладки?

Я пробовал root атрибут на 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' выглядит немного анти-паттерном.

Есть несколько вводных видеоуроков, а не написанных статей о том, как его использовать, но они очень простые и не охватывают использование вкладок.

Answer 1

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>

Answer 2

Поместите содержимое в каждую вкладку. Контент может быть текстовым или компонентным.