【Ionic】新規タブの作成

Ionicで新規ページを作成する方法についてまとめました。

【タブ作成①】コマンドを使用しない場合

① Tabsコンポーネントに表示する各ページを作成します。
デフォルトのhomeコンポーネントをコピーして各ページを作成します。

■コピーの例(memoページを作る場合)

src/pages/home/home.html → src/pages/memo/memo.html
src/pages/home/home.ts → src/pages/memo/memo.ts
src/pages/home/home.scss → src/pages/memo/memo.scss

また、コピーしたあとにtsファイルも次のように編集します。
■編集例(memoページを作る場合)
src/pages/memo/memo.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-memo, /* 書き換え */
  templateUrl: 'memo.html' /* 書き換え */
})
export class MemoPage {  /* 書き換え */

  constructor(public navCtrl: NavController) {

  }

}

② 「app.component.ts」「app.module.ts」「app.html」を次のように編集します。
(memoページを作る場合)
■src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { MemoPage } from '../pages/memo/memo'; // 追加

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
  memoPage:any = MemoPage; // 追加

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

■src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MemoPage } from '../pages/memo/memo'; // 追加

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MemoPage /* 追加 */
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MemoPage /* 追加 */
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

■src/app/app.html

<ion-nav [root]="rootPage"></ion-nav>
<ion-tabs tabsPlacement="top">
    <ion-tab [root]="memoPage" tabTitle="メモ"></ion-tab>
</ion-tabs>

③ 他にもタブ・ページを作る場合は①②を繰り返します。

④ 以下のコマンドを実行して確認します。

ionic serve

■タブ・ページを4つ作成した結果

【タブ作成②】コマンドを使用する場合

① 以下のコマンドを実行します。

ionic g tabs

②次のように作成するタブの設定を聞かれるので順に答えていきます。

質問 意味 入力例
What should the name be? タブのセット名は? homeTabs
How many tabs? タブの個数は? 5
Name of this tab: それぞれのタブ名は? homeTab1→homeTab2→・・・

③ 設定が終わると、以下のメッセージが表示されてタブが生成されます。

 [OK] Generated a tabs page named [TabsName]!

④ src/app/app.component.tsファイルを次のように編集します。

■src/app/app.component.ts
(タブのセット名:homeTabsの場合)

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { HomeTabsPage } from '../pages/home-tabs/home-tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomeTabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}
ポイント
1 作成されたTabsのディレクトリから、そのページをインポート
2 アプリの初期画面をタブのページにしたい場合は、rootPage:anyをHomeTabsPageにする

⑥ src/app/app.module.tsファイルに次の内容を追加します。

■app.module.ts(タブのセット名:homeTabsの場合)

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HomeTabsPage } from '../pages/home-tabs/home-tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    HomeTabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    HomeTabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
ポイント
1 作成されたTabsのディレクトリから、そのページをインポート
2 @NGModule内にある「declarations:」「entryComponents:」にHomeTabsPageを追加します。

⑦ 以下のコマンドを実行して確認します。

ionic serve

関連記事
1 【Ionic入門】Androidアプリ開発編
関連記事