IonicのTab使用時、Tabでの画面遷移urlに、クエリパラメーターを渡したい

Question

IonicのTab使用時、Tabでの画面遷移urlに、クエリパラメーターを渡したい

Ionicで、２つのタブを切り替えて表示するWebページを作成しています。

メインタブを表示する際には、クエリパラメーターを渡して、それを取得できているのですが、
タブの切替時にはクエリパラメーターは消えてしまいます。

このクエリパラメーターを引き渡してURLを表示したいです。

最初のURL

/member/join?shopid=aaa

遷移先のURL

/member/hello

<ion-tabs #myTabs name="myTabsNav" class="mytab">
  <ion-tab-bar slot="bottom" translucent="true" tabsHighlight="true">
   <ion-tab-button tab="hello">
      <ion-label>会員登録</ion-label>
    </ion-tab-button>
   <ion-tab-button tab="hello">
      <ion-label>ご挨拶</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

試したこと

以下のように、tabページのコンストラクタで、クエリパラメーターを追加するようにしましたが、動作しませんでした。

       this.router.navigate(
         ['.'], 
         {
           relativeTo: this.activatedRoute,
           queryParams: { shopid: this.shopid},
           queryParamsHandling: "merge"
         });

Answer 1

Tabsは難しいところですよね・・・。

<ion-tab-button tab="hello?id=1">
  <ion-label>ご挨拶</ion-label>
</ion-tab-button>

をお試しいただけたらわかるように、 tab attributeが、そのままLinkになっていますので、ここを動的に差し替えるのが一番手っ取り早いと思います。

Comments

[motsu3DJ]

なるほど、そういう手がありますね！
ありがとうございます！

もう、Tabs使わないほうが楽なんじゃないかと思っているところでした。