ionic4自定义tabs导航栏（一）

不念不忘少年蓝@ 2021-12-15 19:53 528阅读 0赞

在ionic4项目中，使用`ionic start myApp tabs`可以新建自带tab切换，但是更多时候我们想自定义tab切换，自定义项目目录结构。  
![在这里插入图片描述][20190703103547848.png]

#### 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切换页面可更改可不更改

**更改之后的：**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70][]  
**未更改的**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

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

[20190703103547848.png]: /images/20211215/93393b4f05c343ab8645a29cfd40de25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211215/31531a169ca34eed9ca32de8a82b837d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20211215/1ab86897b06e412581e1baa8f511e697.png