ionic4自定义tabs导航栏（一）

在ionic4项目中，使用ionic start myApp tabs可以新建自带tab切换，但是更多时候我们想自定义tab切换，自定义项目目录结构。

1. 新建一个空白项目

ionic start ionic-demo03 blank

2. 在pages文件夹下新建一个tabs页面

ionic g page pages/tabs

3. 在tabs页面目录下创建tabs.router.module.ts路由文件

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class TabsPageRoutingModule {}

4. 在tabs.module.ts中引入TabsPageRoutingModule

将里面多余的内容删除，用命令创建会自动生成

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { TabsPage } from './tabs.page';
import { TabsPageRoutingModule } from './tabs.router.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

5. 在app-routing.module.ts中删除home路由

将重定向的路由也删除

const routes: Routes = [
    { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
];

6. 配置tabs路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
        {
            path: 'home',
            children: [
                {
                    path: '',
                    loadChildren: '../home/home.module#HomePageModule'
                }
            ]
        },
        {
            path: 'about',
            children: [
                {
                    path: '',
                    loadChildren: '../about/about.module#AboutPageModule'
                }
            ]
        },
        {
            path: 'news',
            children: [
                {
                    path: '',
                    loadChildren: '../news/news.module#NewsPageModule'
                }
            ]
        },
        {
            path: '',
            redirectTo: '/tabs/home',
            pathMatch: 'full'
        }
    ]
  },
    {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class TabsPageRoutingModule {}

7. tabs.page.html

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
            <ion-icon name="home"></ion-icon>
            <ion-label>首页</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="news">
            <ion-icon name="logo-hackernews"></ion-icon>
            <ion-label>新闻</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="about">
            <ion-icon name="information-circle"></ion-icon>
            <ion-label>我的</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

更改作为tab切换的home模块

生成的tabs切换页面可更改可不更改

更改之后的：

未更改的

注：在生成tabs切换对应的页面的时候，命令行工具会自动在app-routing.module.ts中添加路由，应该手动将对应的路由删除掉，然后在tabs对应的路由中手动配置。