在 Ionic 4 中使用硬件后退按钮的正确方法是什么?

Question

我正在创建一个 ionic 4 应用程序，我想使用设备的硬件后退按钮在特定页面返回

我已经检查了此页面 处理 Ionic3 与 Ionic4 中的硬件后退按钮以创建我的代码，但它不起作用

detallesusuario.page.ts

import { Subscription } from 'rxjs';
import { Component, OnInit, AfterViewInit, QueryList, ViewChildren}from '@angular/core';
import { Platform, IonRouterOutlet } from '@ionic/angular';
import { Router } from '@angular/router';
@Component({
selector: 'app-detallesusuario',
templateUrl: './detallesusuario.page.html',
styleUrls: ['./detallesusuario.page.scss'],
})
export class DetallesusuarioPage implements OnInit, AfterViewInit {
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet> ;
sub:Subscription
constructor(private platform:Platform, private ruta:Router) { }
ngAfterViewInit(): void {
this.backButtonEvent();
}
ngOnInit() {
}
ngOnDestroy() {
this.sub.unsubscribe();
}
backButtonEvent() {
let u=0;
this.sub=this.platform.backButton.subscribeWithPriority(0, () => {
this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
console.log('paso');
await this.ruta.navigate(['menu/inicio/tabs/tab1']);
});
});
}
}

当我将应用程序部署到设备时，按钮返回到上一页，而不是转到特定页面

Answer 1

硬件后退按钮处理代码位于：

• https://github.com/ionic-team/ionic/blob/master/core/src/utils/hardware-back-button.ts#L20

这是平台使用platform.backButton公开的：

• https://github.com/ionic-team/ionic/blob/f44c17e03bfcd9f6f9375a19a8d06e9393124ac9/angular/src/providers/platform.ts#L21
• https://github.com/ionic-team/ionic/blob/f44c17e03bfcd9f6f9375a19a8d06e9393124ac9/angular/src/providers/platform.ts#L48

在我看来，您正确使用它。我发现这篇文章显示了相同的技术，还有另一个论坛帖子。

在我看来奇怪的是你为什么要参与IonRouterOutlet。

您是否直接使用router尝试过？

backButtonEvent() {
this.sub=this.platform.backButton.subscribeWithPriority(0, () => {
console.log('paso');
await this.ruta.navigate(['menu/inicio/tabs/tab1']);
});
}

注意：我假设您选择的ngAfterViewInit有意义的 - 我没有仔细检查过。

但是，您可能还应该详细了解此问题，因为硬件后退按钮似乎存在大量问题：

• https://github.com/ionic-team/ionic/issues/16611