如何根据是否使用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屋！