如何覆盖 IonBackButton 的 onclick 行为

Question

如何覆盖 IonBackButton 的点击行为？我能够添加自己的监听器，但我不知道如何防止默认监听器触发。如果用户有未保存的数据，我打算警告他们。

Answer 1

如果你使用的是 ionic 4/5，你可以这样设置，

<ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>

如果还是不行，您也可以使用ion-icon并放置点击功能来导航到其他页面。

Answer 2

根据你对我上次 post 的评论的回复，我不确定我是否理解你真正想要的，但在我看来，只要满足条件，你就可以为用户禁用后退按钮不是真的。并且一旦满足条件，将disabled改为false。

在html,

<ion-buttons slot="start">
      <ion-back-button disabled="btnCondition"></ion-back-button>
</ion-buttons>

在 .ts 中，

btnCondition:boolean = true; //declare

yourfunction() {
    //Whatever code you want
    if(yourcondition==true){
      btnCondition = false; //This will make the back button to work
    }
    elseif(yourcondition==false) {
      //Do anything
    }
}

Answer 3

我使用 IonBackButton 中使用的 NavContext 制作了一个自定义后退按钮。 IonBackButton就是这样实现的。 https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/components/navigation/IonBackButton.tsx

onClick of IonBackButton 实现如下

(e: React.MouseEvent) => {
    const { defaultHref, routerAnimation } = this.props
    if (this.context.hasIonicRouter()) {
      e.stopPropagation()
      this.context.goBack(defaultHref, routerAnimation)
    } else if (defaultHref !== undefined) {
      window.location.href = defaultHref
    }
  }

这是一个简单的自定义 BackButton 使用 NavContext

import { NavContext } from "@ionic/react"
import React, { useContext } from "react"

interface IBackButtonProps {
  defaultHref?: string
}

export const BackButton: React.FC<IBackButtonProps> = function BackButton({
  defaultHref = "/",
}) {
  const navContext = useContext(NavContext)
  const onClick = (e: React.MouseEvent) => {
    if (navContext.hasIonicRouter()) {
      e.stopPropagation()
      navContext.goBack(defaultHref, undefined)
    } else if (defaultHref !== undefined) {
      window.location.href = defaultHref
    }
  }

  return <button onClick={onClick} style={{ width: 48, height: 48 }} />
}

请确保可能出现一些意外行为，因为上述组件仅实现了 onClick 事件。它不使用 IonBackButtonInner 这是 IonBackButton.

的内部组件

Answer 4

您也可以覆盖后退按钮的订阅，例如 app.component.ts

  private backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(1, () => {
      console.log('BACK BUTTON TRIGGERED');
      this.yourFunction();
    });
  }

如果您只想阻止当前 ts 文件中的任何操作：

ionViewWillEnter() {
    this.backButtonSubscription = this.platform.backButton.subscribeWithPriority(9999, () => {});
  }

ionViewWillLeave() {
  this.backButtonSubscription.unsubscribe();
}

如何覆盖 IonBackButton 的 onclick 行为

How can I override the onclick behavior of IonBackButton

javascript

reactjs

ionic-framework

ionic-react