在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对应的路由中手动配置。