在我的app.component中，我试图像这样触发硬件后退按钮： https://stackoverflow.com/a/52349119/4197536
该事件被很好地触发了，但某些东西不起作用outlet.canGoBack()因为它总是假的。
在backButton订阅中，我尝试控制台记录当前的插座值，它总是返回 null。
这里的观点儿童
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
这里的代码
backButtonEvent() {
this.platform.backButton.subscribeWithPriority(0, async () => {
// close action sheet
try {
const element = await this.actionSheetCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
}
// close popover
try {
const element = await this.popoverCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
}
// close modal
try {
const element = await this.modalCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
console.log(error);
}
// close side menu
try {
const element = await this.menu.getOpen();
if (element) {
this.menu.close();
return;
}
} catch (error) {
}
console.log('routerOutlets length', this.routerOutlets.length); // 1
this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
console.log('outlet', outlet); // it's always null
});
});
}
这里是应用程序组件模板
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
这是我的项目信息
Ionic:
Ionic CLI : 5.2.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Capacitor:
Capacitor CLI : 1.1.1
@capacitor/core : 1.1.1
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 6 other plugins)
Utility:
cordova-res : not installed
native-run : 0.2.8
System:
NodeJS : v10.16.0 (/Users/enrico/.nvm/versions/node/v10.16.0/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001
这个问题已经三年了，但我在 Ionic 6 上解决了同样的问题，这是我的答案。
Ionic的GitHub上的这个问题指出：
注入 IonRouterOutlet 需要将其注入组件 在您想要访问的离子路由器出口元素内部。
因此，如果您在app.component.ts中添加逻辑，则最终将始终未定义IonRouterOutlet实例。我通过在home.component.ts内移动逻辑来解决这个问题，第一个逻辑在运行我的应用程序时总是加载：一个小警告，当你以编程方式订阅后退按钮事件时，你会覆盖默认的行为，所以你需要实现标准的"后退"逻辑。
这是我的home.component.ts：
import { Component, Optional } from '@angular/core';
import { App } from '@capacitor/app';
import { IonRouterOutlet, Platform } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
private platform: Platform,
@Optional() private routerOutlet?: IonRouterOutlet
) {
this.platform.backButton.subscribeWithPriority(1, () => {
if (!this.routerOutlet?.canGoBack()) {
App.exitApp();
} else {
this.routerOutlet?.pop();
}
});
}
}