【Ionic/Angular】ion-tabsでページ遷移時に前データが残る場合の対処法【When used with Angular's router】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要
ion-tabsでページ遷移後に、前のページの情報が残ってしまう時の対処法
今後に向けて
参考

概要

今回の記事はIonicのIssuesに投稿されている内容ですが、私の解釈で大丈夫か不安です(理由は後ほど説明します) Allow to reset tab navigation stack on changing tabs. · Issue #17761 · ionic-team/ionic-framework · GitHub
現在、開発中のアプリはion-tabsでページ遷移を実現しています。また、各tab内でもページ遷移も行うことができます。

この場合、以下の手順でページ遷移を行うと、元ページには前のコンポーネントが残っていると思います。

tab1内でページ遷移→tab2に移動→tab1に移動
➡️tab1にはページ遷移後のコンポーネントが残ったまま

理想とする仕様は、tab1に戻ったらtab1の最初のページが表示されることです。今回はこの仕様を実現するための記事を書いていきます。

ion-tabsでページ遷移後に、前のページの情報が残ってしまう時の対処法

懸念事項や実現方法の考察など

この章は読み飛ばしてもらっても問題ありません。

懸念事項

問題の解決にあたり、頭によぎった不安要素を列挙しておきます。

私自身がion-tabsの構造について完全に理解しきれていない。
ネイティブアプリ/Ionicの仕様では、tab移動では前の情報を残しておくのが普通？
Ionicの便利な機能を見落としているかもしれない
Ionic5では良い解決策が用意されているかもしれない

そもそもtabは1つのページ内を遷移するための機能っぽいので、前の情報が残っているのが普通の仕様なんだと思います。

つまり僕のion-tabsの使い方が邪道ぽいです。。。

実現方法の考察

今回は2パターンを考えていました。
この記事では以下の2の実装をします。

ページ遷移先のURLを指定する
tabのスタックからpopする

1は簡単に実装可能でしたが、ページ遷移した時に前のコンポーネントが一瞬だけ見え不格好になったのでやめました。

手順

ion-tab-buttonでクリックイベントを発火
テンプレート側の情報をコンポーネント側で取得
ion-tabs要素から前のコンポーネント情報をpopする

スタックについて

Ionicのtabやnavigationはスタック(stack)と呼ばれる方法でページ遷移を実現しています。
プッシュ(push)やポップ(pop)についても知っておけば、今回の記事が理解しやすくなると思います。詳しくは以下から。
https://wa3.i-3-i.info/word14717.html ion-tab - Ionic Framework 日本語ドキュメンテーション

ion-tab-buttonにクリックイベント実装

該当する各ion-tab-buttonにクリックイベントを実装します。
また、ion-tabsに参照(ローカル)変数を定義します。

component.html

<ion-tabs #myTabs>
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab1" (click)="popTab($event)">
      <ion-icon name="home"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="popTab($event)">
      <ion-icon name="book"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" (click)="popTab($event)">
      <ion-icon name="checkmark-circle"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

テンプレート側の情報をコンポーネント側で取得

先ほど定義したクリックイベントと参照変数から情報をコンポーネント側で取得します。

component.ts

...
@ViewChild('myTabs', {static: false}) myTabs: IonTabs;
resetStackTabs = ['tab1', 'tab2', 'tab3'];
...
popTab = (event: MouseEvent) => {
  const { tab } = event.composedPath().find((ele: any) =>
  ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };
  }
}
...

Tabsのスタックから前情報をポップする

component.ts

...
popTab = (event: MouseEvent) => {
...
    return this.myTabs.outlet.pop(1, tab);
  }
}
...

今後に向けて

以下のコードの解説記事を書こうと思います。

const { tab } = event.composedPath().find((ele: any) =>
ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };

参考

素晴らしい記事に感謝致します。
Allow to reset tab navigation stack on changing tabs. · Issue #17761 · ionic-team/ionic-framework · GitHub https://wa3.i-3-i.info/word14717.html
ion-tab - Ionic Framework 日本語ドキュメンテーション

大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03