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

2 min read読了の目安(約2400字

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

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

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

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

概要

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

利用シーン

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

Modal内で画面遷移する

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

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

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

split-paneのion-nav

実装方法

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を利用しているので興味があれば、確認してみてください!

それでは。