ionic 4 navigateRoot() 显示硬件后退按钮

Question

我有一个登录页面，可以在身份验证成功时将用户导航到主页，为此我使用了 angular 路由器中的navigateRoot()方法。

但是当我这样做时，硬件后退按钮仍然有效并允许我返回主页。

我做错了什么，还是这是一个错误？ 以下是用于导航的代码：

if (user) {
    this.buttonDisabled = false;
    this.loggingIn = false;
    this.navCtrl.navigateRoot('/home');
}

这是我的路线定义的方式：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomePageModule',
  },
  {
    path: 'list',
    loadChildren: './pages/list/list.module#ListPageModule'
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  { path: 'task', loadChildren: './pages/task/task.module#TaskPageModule' },
  { path: 'door', loadChildren: './pages/door/door.module#DoorPageModule' },
  { path: 'work', loadChildren: './pages/work/work.module#WorkPageModule' },
  { path: 'address-search', loadChildren: './modals/address-search/address-search.module#AddressSearchPageModule' },
  { path: 'parts-list', loadChildren: './modals/parts-list/parts-list.module#PartsListPageModule' }
];

环境信息：

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.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

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.0
   NodeJS     : v12.9.0 (/usr/local/Cellar/node/12.9.0/bin/node)
   npm        : 6.11.2
   OS         : macOS
   Xcode      : Xcode 10.3 Build version 10G8

我希望我不是唯一一个遇到这个问题的人，它让我发疯。

提前致谢

Answer 1

我完全按照你的描述遇到了这个问题。 在我的 app.component.html 文件中，我缺少<ion-router-outlet>周围的<ion-router-outlet> <ion-app>包装器。 我把它放进去，它修好了。

Answer 2

在您的主页上，像这样处理硬件后退按钮以关闭应用程序：

例如

   ionViewDidEnter(){
          this.subscription = this.platform.backButton.subscribe(()=>{
              navigator['app'].exitApp();
          });
   }

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

编辑：如果这不起作用，请这样做：

this.platform.backButton.subscribeWithPriority(1, () => {
        //on or the other will work depending on hardware
        navigator['app'].exitApp();
 });

这将在主页上关闭您的应用程序。