Ionic 4 硬件后退按钮路由

Question

我在 Ionic 4 Beta 15 中遇到路由问题，希望有人能帮我解决它。我的 Ionic 4 应用程序有一个包含 4 个页面的侧边菜单。其中一个页面是调用主页，它是应用程序的起始页面。当用户在其中一个侧面菜单页面中点击硬件后退按钮时，我希望能够返回该页面。此外，该主页由 3 个选项卡组成，这些选项卡具有自己的路由。我还希望能够将用户首先发送到主页的第一个选项卡。我尝试过使用 Router 和 NavController 的各种方法，但我总是对历史堆栈有疑问。根据您所在的页面，我已将我的 app.components 页面包含在所需的输出中。请帮忙，我已经敲了几个星期头了。

app.components.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  public appPages = [
    {
      title: 'Home',
      url: ''
    },
    {
      title: 'Bible',
      url: '/bible'
    },
    {
      title: 'Map',
      url: '/map'
    },
    {
      title: 'Give',
      url: '/give'
    }
  ];

  constructor(private router: Router,
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar) {
    this.initializeApp();
    this.hardwareBackButton();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  hardwareBackButton() {
    this.platform.backButton.subscribe(async () => {
      console.log(this.router.url);
      let url = this.router.url;

  switch (url) {
    case '/tabs/(messages:messages)':
      // This works like I want it to
      // When you are at the /tabs/(messages:messages) page and the back 
      // button it his, the app will exit
      navigator['app'].exitApp();
      break;
    case '/tabs/(e3:e3)':
      // Here I want to navigate to /tabs/(messages:messages) page
      break;
    case '/tabs/(prayers:prayers)':
      // Here I want to navigate to /tabs/(messages:messages) page
      break;
    case '/bible':
      // Here I want to navigate to /tabs/(messages:messages) page
      break;
    case '/map':
      // Here I want to navigate to /tabs/(messages:messages) page
      break;
    case '/give':
      // Here I want to navigate to /tabs/(messages:messages) page
      break;
  }
    });
  }

}

app-routing.modules.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: './tabs/tabs.module#TabsPageModule'
  },
  {
    path: 'bible',
    loadChildren: './bible/bible.module#BiblePageModule'
  },
  {
    path: 'map',
    loadChildren: './map/map.module#MapPageModule'
  },
  {
    path: 'give',
    loadChildren: './give/give.module#GivePageModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { MessagesPage } from '../messages/messages.page';
import { E3Page } from '../e3/e3.page';
import { PrayersPage } from '../prayers/prayers.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(messages:messages)',
        pathMatch: 'full',
      },
      {
        path: 'messages',
        outlet: 'messages',
        component: MessagesPage
      },
      {
        path: 'e3',
        outlet: 'e3',
        component: E3Page
      },
      {
        path: 'prayers',
        outlet: 'prayers',
        component: PrayersPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(messages:messages)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

非常感谢任何帮助。

Answer 1

使用以下命令覆盖 ionic 4 中的默认硬件后退按钮

在你的 app.copmponent.ts 构造函数中，订阅后退按钮事件

对于操作表、模态框、弹出框等...定义预期的操作

最后使用 navctrl 跳到上一页（使用角度路由）

import { ....,NavController} from '@ionic/angular';

consructor(.....,public nav : NavController)
{
  this.backButtonEvent()
}

backButtonEvent() {
   this.platform.backButton.subscribeWithPriority(9999, async () => {
     try {
       const element = await this.actionSheetCtrl.getTop();
       if (element) { element.dismiss(); return }
     } catch (error) {}
     try { 
           const element = await this.popoverCtrl.getTop();
           if (element) { element.dismiss(); return }
         } catch (error) {}
     try {
           const element = await this.modalCtrl.getTop();
           if (element) { element.dismiss(); return }
         } catch (error) { }
     try {
           const element = await this.alertController.getTop();
           if (element) { element.dismiss(); return }
         } catch (error) { }
     } 
     this.nav.pop() 
   });
}