如何在单击离子选项卡时自动添加查询参数?

Question

如何在Ionic中使用离子选项卡单击选项卡时自动添加查询参数?

例如，考虑三个制表符:

<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-label>Tab3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

如果我单击Tab1，我希望自动导航到/tabs/tab1?foo=bar而不是/tabs/tab1(对于其他选项卡也是如此，请注意查询参数值在实践中是动态的)。什么是好的、简洁的方法?

Answer 1

您可以简单地在tab1之后添加?foo=bar，或者您可以为它设置一个变量(参见tab2)，或者您甚至可以设置条件(参见tab3)

<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1?foo=bar">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2?foo={{myCustomVariable}}">
<ion-label>Tab2</ion-label>
</ion-tab-button>
<ion-tab-button [tab]="myCustomCondition === true? 'tab3?foo=bar' : 'tab3'">
<ion-label>Tab3</ion-label>
</ion-tab-button>
<ion-tab-button tab="{{getTabRoute(4)}}">
<ion-label>Tab4</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
getTabRoute(index: number): string {
if(this.conditionToAddQuryParams === true){
return 'tab' + index + '?' + this.myQueryParams;
} else {
return 'tab' + index;
}
}