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: '返回' // -- 配置返回按鈕

    })

  ],