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

【问题标题】：How to make use of ion-tabs for routes in different modules in Ionic 4?如何在 Ionic 4 的不同模块中使用 ion-tabs 路由？
【发布时间】：2019-07-09 14:17:55
【问题描述】：

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

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

【问题讨论】：

标签： angular ionic-framework angular7 ionic4

【解决方案1】：

选项卡不使用 routerLinks，而是绑定到路由器配置本身。

正如the docs 中提到的，给定一个像这样的标签：

<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

【讨论】：