Ionic/angularでもion-navを使って画面遷移させる

この記事はIonic Framework / Capacitor Advent Calendar 2020の記事です。

皆さんこんにちは。scrpgilです。

普段、仕事でもIonicを使いつつ、趣味でもAAHubというアスキーアート閲覧サイトを作成しています。

今回は、このサイトで実装しているion-navを使って画面遷移する方法について書きたいと思います。

概要

Ionic4以降、Ionicのルーティング処理は各フレームワークのルーターを使うようになりましたが、@ionic/coreにもion-navというコンポーネントがあり、こちらを利用して画面遷移をすることができます。

利用シーン

「Angularのルーターがあるのにion-nav使うシーンなんてあるの？」と思われるかもしれませんが、次の場合に利用することがあります。

Modal内で画面遷移する

Modal内の画面遷移は次のgifのような遷移です。Twitterとかでもたまに見るので、おそらくやりたい人が多いかと思います。

SplitPaneのメニュー側で画面遷移する

もう一つの利用シーンはSplitPaneのメニュー側で画面遷移させる場合です。

実装方法

ion-navを使った画面遷移は大きく分けて3つのステップになります。

・ion-nav用のWrapperページを作る
・画面遷移させたいページを作る
・コンポーネント関数にアクセスして画面遷移させる

この記事ではModal内の画面遷移のページを作りながら処理を見ていきます。
コードの全文はこちらのリポジトリにあげてあります。

ion-nav用のwarpperページを作る

まずは、ion-navのwrapperページを作ります。ion-navタグだけ定義してあって、rootPageには表示したいModalPageを読み込ませます。

コードのリンクはこちら

<ion-nav [root]="rootPage"> </ion-nav>

import { Component, OnInit } from "@angular/core";
import { ModalPage } from "../modal/modal.page";

@Component({
  selector: "app-modal-wrapper",
  templateUrl: "./modal-wrapper.page.html",
  styleUrls: ["./modal-wrapper.page.scss"],
})
export class ModalWrapperPage implements OnInit {
  rootPage: any = ModalPage;

  constructor() {}

  ngOnInit() {}
}

モーダルページを作る

次に、モーダルで最初に表示するページと、遷移させたいページを作成します。

ion-navのpush関数にアクセスして画面遷移する

最後に、ion-navを使った画面遷移ですが、以下の方法で行なえます。

  nextPage() {
    (this.el.nativeElement.closest("ion-nav") as any).push(Modal2Page);
  }

SplitPageの場合

split-paneの場合もほぼ同様の方法です。次にGitHubのコードだけ載せておきます。
SplitPaneのコード

おわり

これでion-navを使った画面遷移を実装することができました。Ionic4以降、ルーティング処理は各フレームワークが提供しているモジュールで行なうようになりましたが、ion-navを使った画面遷移の方法も小回りが効くので覚えておいて損がないです。

Ionic5を使ったサイトに興味がある場合、AAHubというサイトでionic/angularを利用しているので興味があれば、確認してみてください！

それでは。