离子后退按钮在任何情况下都不起作用

Question

我尝试使用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>

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

离子框架论坛1

离子框架论坛2

Answer 1

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

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

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

constructor( private routerOutlet: IonRouterOutlet ) { }

第3步： 定义返回函数

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

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

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

Answer 2

试试这个，它解决了我的问题：

<ion-back-button text="返回" (click)="pop()"></ion-back-button>
import {NavController} from '@ionic/angular';
export class XXComponent{
constructor(private navCtrl: NavController) {}
  async pop() {
    await this.navCtrl.pop();
  }
}

Answer 3

对于这种情况来说不是一个完美的解决方案，但它确实可以处理流畅的动画。

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

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

后退按钮破解源代码链接

信用链接

Answer 4

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

您必须提供页面 URL。

Answer 5

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

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

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

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

看来你的代码带有defaultHref

<ion-back-button defaultHref="/"

这里不起作用，更换它。

Answer 6

在带有 Angular 的 Ionic v8 中需要（更好）使用

ion-router-outlet

，如下所示。

路由器出口的行为方式与 Angular 的内置路由器出口组件和 Vue 的路由器视图组件类似，但包含提供堆叠导航以及动画视图进出的逻辑。

虽然路由器出口有导航方法，但建议使用框架路由器中的导航方法。

<ion-app>
    <ion-content id="main-content" fullscreen="true">
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
</ion-app>

这里

ion-content

组件是可选的。

文档：https://ionicframework.com/docs/api/router-outlet