ionic4のページ遷移 - きまぐれweb/app開発日記

前回 ionic3からionic4への移行について記事を書きましたが、ionic4になって最も大きく変更されたのがページ遷移の方法です。

今回の記事では前回書ききれなかったページ遷移について書きたいと思います。

Ionic4ではルーティングmoduleを使用

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

const routes: Routes = [
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'contact', loadChildren: './contact/contact.module#ContactPageModule' },
];

これによってsrc/app/homeとsrc/app/contactにあるページへのルーティングができます。

最も単純なページ遷移

homeページからcontactページ遷移したい時はどうしたらいいかというと、下記のようにangular/routerを利用して遷移できます。

home.page.ts

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

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

this.router.navigateByUrl('/contact');

「this.router.navigateByUrl('/contact')」がionic3の

this.navCtrl.push(ContactPage);

に代わるメソッドです。

さらに、home.page.htmlから下記のようなリンクを使って遷移することもできます。

<a href="/contact">contact page</a>

パラメータを送るときのページ遷移のしかた

homeページからcontactページへidというパラメーターを送付したい場合は下記のようにurlの後にパラメータを設定します。

app-routing.module.ts

const routes: Routes = [
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'contact/:id', loadChildren: './contact/contact.module#ContactPageModule' },
];

パラメータを送るために変えるのはpath: contact/:idのところだけです。

送信側のhomeはこんな感じ。

home.page.ts

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

export class HomePage implements OnInit {
  constructor(
    private router:Router,
  ){}
var id:string = '1';
this.router.navigateByUrl('/contact/' + id);

home.page.html

<a href="/contact/1">contact page</a>

受け取る側のcontactではActivatedRouteとParamapを使って下記のように受け取ります。

contact.page.ts

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

export class ContactPage implements OnInit {
   id:string;

  constructor(
    private router:Router,
    private route: ActivatedRoute,
    ){}

  ngOnInit(){
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
      });
  }

最初は少し戸惑うんですが、一度やってみると難しくは感じません。

複数のパラメータを送るページ遷移

複数のパラメータを送るときも基本的に同じで、/でつなげて後ろにパラメータを増やしていくだけです。下記はidに加えてnameとageを送る例です。

app-routing.module.ts

const routes: Routes = [
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'contact/:id/:name/:age', loadChildren: './contact/contact.module#ContactPageModule' },
];

home.page.ts

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

export class HomePage implements OnInit {
  constructor(
    private router:Router,
  ){}
var id:string = '1';
var name:string = "bob";
var age:string = '20';
this.router.navigateByUrl('/contact/' + id + '/' + name + '/' + age);

home.page.html

<a href="/contact/1/bob/20">contact page</a>

contact.page.ts

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

export class ContactPage implements OnInit {
   id:string;
   name:string;
   age:string;

  constructor(
    private router:Router,
    private route: ActivatedRoute,
    ){}

  ngOnInit(){
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
      this.name = params.get('name');
      this.age = params.get('age');
      });
  }

ionic4のルーティングは恐れる必要なし

ionic3やり方が変わったので最初は慣れませんし、実際少しだけ複雑になっています。しかし、webアプリであるかのようにページを遷移していける自由度はionic3までには無かったものです。

この変更により、わずかな手間と引き換えに、大きな自由度を手にした印象です！Ionic team, good job!