ionic3.x - 如何添加 tabs, 如何取消二级页面的 底部导航(tabs), 如何修改返回按钮
一. 如何添加底部 tabs
1. 创建新页面
ionic g page newsPage
2. 在 app.module.ts 中引入 注册
//页面 自定义的组件
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { NewsPage } from "../pages/news/news"
import { NewsInfoPage } from "../pages/news-info/news-info"
declarations: [ /*申明组件*/
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
NewsPage,
NewsInfoPage
],
entryComponents: [ /*配置不会在模板中使用的组件*/
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
NewsPage,
NewsInfoPage
],
3. 在 tabs.ts 页面中配置
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { NewsPage } from '../news/news'
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
tab4Root = NewsPage;
constructor() {
}
}
tabs.html:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="new" tabIcon="apps"></ion-tab>
</ion-tabs>
二. 如何取消二级页面的底部tabs, 如何修改返回按钮
imports: [ /*引入的模块 依赖的模块*/
BrowserModule,
ComponentsModule,
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages: true, //-- 影藏全部子页面的 tabs
backButtonText: '返回' // -- 配置返回按钮
})
],