时间戳

首页 > 解决方案 > 如何在 Ionic 4 的不同模块中使用 ion-tabs 路由？

angular - 如何在 Ionic 4 的不同模块中使用 ion-tabs 路由？

问题描述

我刚刚开始将 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>

这似乎工作得比较好，除了所有选项卡现在的样式都好像它们都是活动的一样。我该如何解决这个问题，是否有一种“正确”的方式在不同模块中使用选项卡进行路由？

标签： angularionic-frameworkangular7ionic4

解决方案

选项卡不使用 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>

预计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'
      }
    ]
  }
];

最好查看 tabs starter 以获得更好的示例。

ionic start myApp tabs

推荐阅读