[上級者向け]Tabsで、NavPushしたPageにURLアクセスできるようにする

この記事はIonic Advent Calendar 2017の5日目です。また、バージョンアップにより動作しない可能性があります。十分にご注意ください。

挙動確認時点のバージョンは、ionic-angular 3.9.2です。

---

Ionicは、PWA宣言をして積極的にURLルーティングのサポートをはじめました。しかしながら、界隈では有名なぐらいに「Tabsのルーティングには弱い」です。フレームワークとしては非サポートなので自分自身でJavaScript書いてね、ぐらいの勢い。

もちろん、Tabを選択するぐらいは容易です。URLをみて、ドキュメントにある通りselect()でタブを指定してやればすむ話。しかしながら、

1. tabsのページを開いて
2. そこからPush遷移したページを
3. history含めてURLからアクセスする

のはなかなかに難しいです。そこで、その実装について解説します。なお、本ソースコードは

に上げておりますので、ご参考ください。

Lazy Loadng

まず、IonicPageを導入してLazy Loadngを実装します。

1. それぞれのファイル名に対応したmoduleファイルを設置（例：home.tsなら、home.module.ts）
2. @Componentの前に、@IonicPage()を追加
3. 別Component呼び出しの時は、文字列で呼び出す

の手順を行ってください。具体的な手順は以下のコミットになります。

Lazy Loadingの副次効果として、それぞれに自動的にURLが振り分けられるようになりました。

下層ページとPushボタンを追加

追加します。Ionic CLIをつかって生成すると早いです。今回はdetailというページ名にしました。

ルーティング

そして、ルーティングの実装をします。IonicのTabsは、何も設定しない状況ではPush遷移によって

とURLバーに表示されても、リロードすると自動的にTabsの先頭に戻ってくる仕様となっております。しかし、

1. Tabsのsegmentが別名となっており（https://github.com/rdlabo/ionic-tabs-route/commit/a264f98bdaadd9ff8aefd65921561ec9017b789e#diff-df85d0ee0c185daf453f19cd506b6735L4）
2. TabのtabUrlPathも別名となっている場合（https://github.com/rdlabo/ionic-tabs-route/commit/a264f98bdaadd9ff8aefd65921561ec9017b789e#diff-71b48e585d5efe186d0f1b663dbb3eecL2）

に限っては、リロードすると下層ページにそのままアクセスすることができます。しかしながら、Historyはすべて消えてしまうようで、navCtrl.pop()はできません。

そこで、更に、Historyを手動で追加します。

    ngOnInit(){
        if(this.navCtrl.getViews().length == 1){
            this.navCtrl.insert(0, 'HomePage', null,{ animate:false }).then(
                ()=>this.navCtrl.push('DetailPage',null, { animate:false }).then(
                    ()=>{
                        this.navCtrl.remove(1)
                    }
                )
            );
        }
    }

本来、このページにPush遷移でアクセスしようと思うと、Historyに親ページがあるので、getViews().lengthは2となるはずです。それが1となっている場合、直接アクセスしている状態です。
その場合、まずHistoryに親ページとなるHomePageを追加して、そのあとnavCtrl.pushでDetailPageへと遷移します。これらは裏側で行うためにアニメーションは表示しません。
そして、最初に表示したHistoryをremove()します。

これで、Tabsで、NavPushしたPageにURLアクセスできるようになりました！そして、navCtrl.popで戻ることもできます！

ちなみに、Tabsを使っていなかったら、@IonicPageのdefaultHistoryが正常に動くので、こういうことしなくても親子関係を指定したらしっかり動作します。

それではまた。