次のページに遷移する方法
ある画面から次の画面へ遷移する方法を説明します。
先に結論を言うと NavController オブジェクトの push メソッドにページとなるコンポーネントクラス名を渡すことで、 次のページに遷移することが可能です。
実際に試してみましょう。
まずテスト用のプロジェクトをスタートします。
$ ionic start test1 blank --v2 $ cd test1
ページをひとつ追加します。
$ ionic g page nextPage
デフォルトで作成される home ページから、この nextPage に移動するにはどうしたら良いでしょうか。
まずは、移動したことがわかりやすいように移動先である NextPage のテンプレートを書き換えます。からっぽでは移動したのかどうかわからないですし。
src/pages/next-page/next-page.html に h1 タグで文字を追加します。
<ion-header>
<ion-navbar>
<ion-title>nextPage</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1 ion-text color="primary">Hello!</h1>
</ion-content>
またルートモジュール (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 { NextPageModule } from '../pages/next-page/next-page.module';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
NextPageModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
さて home ページ (src/pages/home/home.html) に、画面遷移のきっかけとなるボタンを配置します。
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block (click)="onClick()">Next Page</button>
</ion-content>
ボタンの click イベントハンドラである onClick を src/pages/home/home.ts に記述します。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NextPage } from '../next-page/next-page';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {}
onClick(){
this.navCtrl.push(NextPage);
}
}
このように NavController オブジェクトの push メソッドにページとなるコンポーネントクラス名を渡します。 NavController オブジェクトは DI でコンストラクタにて受け取っています。
これによって、ナビゲーションスタックにページが積まれ、戻る、とすれば元のページに戻ってくることが可能になります。