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

首页新闻我的

更改作为tab切换的home模块

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

更改之后的：

未更改的

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！