IONIC后退按钮在任何情况下都不起作用答案

【问题标题】：IONIC back button not working at any caseIONIC后退按钮在任何情况下都不起作用
【发布时间】：2021-03-18 12:37:41
【问题描述】：

我尝试使用ionic-back-button。当应用程序加载时，我被重定向到帐户页面 core.page.ts。在此页面中，我有两个带有 routerlink 登录和注册的按钮。当我单击 core.page.html 中的登录按钮时，我被重定向到登录页面。后退按钮也会出现。但是，当单击该后退按钮时，除了涟漪效应外，它什么也不做。我不确定为什么。请帮忙。

在我的 app.routing.module.ts 中

const routes: Routes = [
  {
    path: '',
    redirectTo: 'account',
    pathMatch: 'full'
  },
  {
    path: 'account',
    loadChildren: () => import('./core/core.module').then( m => m.CorePageModule)
  }
];

在我的 core.routing.module.ts 中

const routes: Routes = [
  {
    path: '',
    component: CorePage
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
];

在我的 core.page.html 中

<div class="button_wrap">
  <ion-button color="success" [routerLink]="['/account/register']"  expand="block">Sign Up</ion-button>
  <ion-button color="light" [routerLink]="['/account/login']"  expand="block">Log In</ion-button>
</div>

在我的登录页面中

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" icon="chevron-back-outline" text="Back"></ion-back-button>
    </ion-buttons>
    <ion-title>LOGIN</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p> login works! </p>

</ion-content>

这里提到了类似的故事，但没有确切的解决方案。

Ionic Framework Forum 1

Ionic Framework Forum 2

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

对于这种情况不是一个完美的解决方案，但它确实适用于流畅的动画。

<ion-back-button (click)="goBack()"></ion-back-button>

import { IonRouterOutlet } from '@ionic/angular';
goBack() {
    this.routerOutlet.pop();
}

back button hack source code link

Credit link

【讨论】：

【解决方案2】：

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

您必须提供页面 URL。

【讨论】：

如果我从主页导航到登录页面，后退按钮应该可以工作，但它不起作用。即使我添加了 defaultHref，它也不能与 url 或任何东西一起使用。
请检查路由路径。
我做到了。我检查了使用多个路径并将它们设置为默认路由。他们都没有工作。我还提供了类似故事的链接。请检查。
能否请您更新上面的代码，以便我检查？因为它在我的系统中运行良好，所以我的项目的配置是：Ionic CLI：6.13.1 Ionic Framework：@ionic/angular 5.5.4

【解决方案3】：

您可以在后退按钮上将“root”指定为 routerDirection：

<ion-button class="root" routerLink="/home" routerDirection="root">Home</ion-button>

当您想返回上一页时使用：

back(): void {
    this.router.navigate("..");
}

您的代码似乎带有 defaultHref

<ion-back-button defaultHref="/"

这里不工作，更换它。

【讨论】：

感谢您的回答。但我想知道为什么 ion back button 显示但不起作用？

【解决方案4】：

在 ionic 5 上运行良好，可以让按钮返回上一页 第 1 步： 在你的 .ts 文件中导入这个

import { IonRouterOutlet } from '@ionic/angular';

第 2 步： 将其添加到 .ts 文件的构造函数中

constructor( private routerOutlet: IonRouterOutlet ) { }

第 3 步： 定义返回函数

 goBack() { this.routerOutlet.pop(); }

第 4 步： 在您的 .html 文件中使用它

<ion-icon (click)="goBack()" slot="start" name="arrow-back-outline"></ion-icon>

【讨论】：