navigateByUrlを使ってionicでのページ遷移をしてみた

こんばんは、本日はnavigateByUrlを使ってページの遷移をしてみたので記録しておきたいと思います。

ionicでアプリを作っていて、ページの遷移を実装したいなと思って調べていたのですが、ページの遷移法としてよく見る(当社比）

  constructor(public navCtrl: NavController) {}

  onClick(){
    this.navCtrl.push(NextPage);
  }

というNavController.pushを使った方法でやっていたんですが、なんかnavCtrlのプロパティにpushがないというエラーが出る。

公式ドキュメントにも載っているのですが…　　(2019/9/5現在)

調べてみるとどうやら、ioni4になってからNavCtrlのpushが使えなくなっていたようです。

そのため今回はnavCtrl.pushに変わる関数として、navigateByUrlを使ってページの遷移をしてみました。

その際参考にしたサイトはこちら

ionic4のページ遷移

Ionic v4 (@ionic/angular)でのルーティングについて

navigateByUrlの設定方法

navigateByUrlとはnavCtrl.pushに変わる関数であるそうです。

これを設定するためには、以下の手順を踏まなければならないそうです。

１．　app-routing.module.tsにパスを設置

２．　遷移したいページにimport { Router } from ‘@angular/router’;をインクルード

３．navigateByUrlを宣言

ionic4ではwebページと同じような、urlを元にしたページ遷移に変わっています。その鍵になるのがsrc/appフォルダの中にあるapp-routing.module.tsです。例えばHomeというページとContactというページにパスを登録するのであれば、下記のように記入します。

app-routing.module.tsにパスを設置

まずはapp-routing.module.tsにパスを設置します。app-routing.module.tsはsrc/app/にあるはずなので、以下のコードを追記します。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    //ページ遷移ではルートを通さなければいけないらしい
  { path: 'tab3', loadChildren: './tab3/tab3.module#Tab3PageModule' },  //こんな感じで追記
　{ path: 'tab1', loadChildren: './tab1/tab1.module#Tab1PageModule' },　　
　{ path: 'tab2', loadChildren: './tab2/tab2.module#Tab2PageModule' },
　{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },

追記するのは{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }という部分です。‘ ‘で囲まれた部分を自分のプログラムの該当箇所に合わせて下さい。

#Tab3PageModuleというのはtab3.module.tsのにあるexport classで宣言されている部分ですね。

遷移したいページにimport { Router } from ‘@angular/router’;をインクルード

遷移したいページのｔｓファイルに下記コードを追記するだけです。簡単ですね。

import { Router } from '@angular/router';

navigateByUrlを宣言

これで、navigateByUrlを使う準備ができました。後はｔｓファイルにて関数の宣言を行うだけです。

サンプルコードをいかに示します。

export class HomePage implements OnInit {
  constructor(
    private router:Router,
  ){

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜抜粋〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
SampleNoKansuu(){
    this.router.navigateByUrl('/tab1');
  }
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

}

シグニチャはnavigateByUrl('/｛遷移したいページ｝');です。

手順１で設置したパスの名前に“/”を付ける必要があります。