ionic3でハイブリッドアプリを作ってみよう。 - ページ遷移編

前回の続きです。

ボタンを設置する

まずは画面遷移のトリガーとなるボタンを設置します。

src/page/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

  // ボタンを追加
  <button  ion-button>next</button>

</ion-content>

これで一度実行してみましょう。

$ ionic cordova run ios

nextと表示されたボタンが表示されました。
今は表示されただけなので、反応はしますが遷移はしません。

ページを生成する

次は遷移先のページを作っていきます。
ionicにはgenerateという便利なコマンドが用意されていて、ページの追加も簡単にできます。
コチラに一覧があります。

$ ionic generate page nextPage
[OK] Generated a page named nextPage!

src/pages/配下にnextというディレクトリと、その中に以下のようなファイルが生成されました。

src/pages/next/next.html
src/pages/next/next.module.ts
src/pages/next/next.scss
src/pages/next/next.ts

ページを読み込む

ページが生成されたらルートモジュールでこの新しく生成されたモジュールを読み込んでおく必要があります。

src/app/app.module.ts

.
.
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NextPageModule } from '../pages/next/next.module'; // ←追加

@NgModule({
  .
  .
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    NextPageModule  // ←追加
  ],
  .
  .
})
export class AppModule {}

上記の二行を加えます。
仕様するモジュールが増える度にこのファイルに追加設定をしていきます。
これでページを使う準備ができました。

遷移処理を追加

ページ自体とページを使う準備ができたので、今度はボタンを押してページ遷移をする処理を追加していきます。

先程追加したボタンにクリックイベントを付けます。

src/pages/home/home.html

<button ion-button (click)="toNextPage()">next</button>

これでボタンがクリックされたらtoNextPage()という処理してくれます。
次はこのtoNextPage()の中身を書きます。

src/pages/home/home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  // ボタンが押されたときのページ遷移処理
  toNextPage(){
    this.navCtrl.push(NextPage);
  }
}

追加しているのは3行目のimportと、toNextPage()という処理です。

実行

動かしてみましょう

$ ionic cordova run ios

次はデータの永続化とか書きます。