ionic blankプロジェクトからtabsを追加する

チュートリアルを行い、サイドメニューやタブが最初からあるプロジェクトを始めることはできたのですが、そのデザインを変更したり、修正を加えようと思うと、仕組みを知っていると便利かと思いました。

ちょうどそれに関する動画があったので真似しながらやったメモです。

How to create a tabs menu in ionic 2/3 in a blank template - YouTube

最初に必要となるページと、タブをページとして作成する

$ ionic g page about
$ ionic g page contact 
$ ionic g page tabs

次にタブを作成 tabs.html

<ion-tabs>
  <ion-tab [root]="aboutPage" tabTitle="about Page" tabIcon="star"></ion-tab>
  <ion-tab [root]="contactPage" tabTitle="contact Page" tabIcon="star"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  aboutPage = AboutPage;
  contactPage= ContactPage;

}

tabs.tsには@IonicPage()がCLIからページを作成した際に自動的に含まれているが、これはlazy loadingと呼ばれる機能(サイト全体を高速に読み込むために一部のページ読み込みを遅延させて読み込む的な?)に関するもの。タブは全ページに必要とされるのでこの機能は必要ない。

app.component.ts

- import { HomePage } from '../pages/home/home';
+ import { TabsPage } from '../pages/tabs/tabs';

-  rootPage:any = HomePage;
+ rootPage:any = TabsPage; 

ルートページをタブに変更

これらのcomponentをアプリで使えるようにするためにapp.module.tsにexport

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { TabsPage } from '../pages/tabs/tabs';

.....

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AboutPage,
    ContactPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AboutPage,
    ContactPage,
    TabsPage
  ],

.....

これで、以下のようなタブが出来上がった。

f:id:hiroaki77:20180124015015p:plain