如何根据是否使用defaultHref获得有条件的离子后退按钮文本? [英] How can I have conditional ion-back-button text based on if the defaultHref is used?
问题描述
我有一个我想显示文本的按钮,但仅当使用defaultHref时才显示.有办法检测到吗?
< ion-back-button * ngIf ="defaultHref" [defaultHref] ="defaultHref" [text] ="text" icon ="ios-arrow-back" mode ="md"<<;/ion-back-button>
如果由于不同的路由器前进而显示后退按钮,则后退按钮链接会移至其他位置,但我设置的文本仍然存在.有没有一种方法可以使该文本以与我设置的defaultHref相匹配的链接为条件?
通过一些调查,
这可以追溯到以下历史记录:
I have a button that I want to display text but only when the defaultHref is used. Is there a way to detect that?
<ion-back-button *ngIf="defaultHref" [defaultHref]="defaultHref" [text]="text" icon="ios-arrow-back" mode="md"></ion-back-button>
If the back button shows as a result of a different router forward, the back button link goes somewhere else but the text I set is still there. Is there a way to make that text conditional upon the link matching the defaultHref that I set?
From some investigation, the component itself doesn't know if it can go back until it tries to go back:
private onClick = async (ev: Event) => {
const nav = this.el.closest('ion-nav');
ev.preventDefault();
if (nav && await nav.canGoBack()) {
return nav.pop({ skipIfBusy: true });
}
return openURL(this.defaultHref, ev, 'back');
}
This is still possible though because you can just mimic this, and check if the app can go back in the logic that you use to set the text.
Page.html:
<ion-buttons slot="start">
<ion-back-button defaultHref="/custom-back-button" [text]="getCustomText()"></ion-back-button>
</ion-buttons>
Page.ts:
constructor(
private ionRouterOutlet: IonRouterOutlet
) { }
getCustomText():string {
if(this.ionRouterOutlet.canGoBack()) {
return "Can Go Back Text";
} else {
return "Can Only Go To Default";
}
}
Which shows this when it's navigated directly:
And this when it has a history to go back to:
这篇关于如何根据是否使用defaultHref获得有条件的离子后退按钮文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!