Как использовать ion-tabs для маршрутов в разных модулях в Ionic 4? - PullRequest
Новая
       24

Как использовать ion-tabs для маршрутов в разных модулях в Ionic 4?

0 голосов
/ 09 июля 2019

Я только начинаю использовать Ionic 4 с Angular и пытаюсь добавить вкладки к различным маршрутам.Если я понимаю официальную документацию Ionic, получается, что если я хочу иметь вкладки, они должны быть помещены в родительский компонент, а каждый атрибут tab должен ссылаться на фактический дочерний путь.

Однако я ищу другую функциональность.Я хочу, чтобы мои вкладки были просто ссылками маршрутизатора на разные пути в моем приложении, которые не обязательно являются дочерними элементами контейнера.

Я решил попробовать добавить атрибут routerLink к элементам ion-tab-button, чтобы проверить,получите желаемый результат.

<ion-tabs>

  <ion-tab-bar slot="bottom">

    <ion-tab-button routerLinkActive="" [routerLink]="['/', 'content', 'dashboard']">
      <ion-label>Home</ion-label>
      <ion-icon name="home"></ion-icon>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/', 'content', 'explore']">
      <ion-label>Explore</ion-label>
      <ion-icon name="search"></ion-icon>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/', 'user']">
      <ion-label>Profile</ion-label>
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Кажется, это работает относительно хорошо, за исключением того факта, что все вкладки теперь оформлены так, как если бы они были активными.Как я могу это исправить и есть ли «правильный» способ использования вкладок для маршрутов в разных модулях?

1 Ответ

1 голос
/ 09 июля 2019

Вкладки не используют routerLinks, но привязаны к самой конфигурации маршрутизатора.

Как упоминалось в документах , для данной вкладки: 

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

The tabs-router.module.ts можно было бы ожидать, чтобы выглядеть так:. 

import { Routes } from '@angular/router';
import { TabsPage } from './tabs-page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'schedule',
        children: [
          {
            path: '',
            loadChildren: '../schedule/schedule.module#ScheduleModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/app/tabs/schedule',
        pathMatch: 'full'
      }
    ]
  }
];

лучше всего смотреть на язычки стартер для лучшего примера

1013 *
...