文章/答案/技术大牛

发布

问Ionic 4硬件返回按钮路由
EN

Stack Overflow用户

提问于 2018-11-30 00:17:53

回答 1查看 942关注 0票数 1

我在Ionic 4 Beta 15中遇到了路由问题，希望有人能帮我解决。我的Ionic 4应用程序有一个带有4个页面的侧边菜单。其中一个页面是call Home，它是应用程序的起始页。我希望能够返回到该页面时，用户点击硬件后退按钮，当他们在一个侧边菜单页面。此外，该主页由3个选项卡组成，这些选项卡有自己的路由。我也希望能够将用户发送到首页的第一个选项卡。我尝试过使用路由器和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 {}

任何帮助都是非常感谢的。

angular

ionic-framework

回答 1

Stack Overflow用户

发布于 2019-06-12 18:04:05

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

在app.copmponent.ts构造函数中，订阅back按钮事件

用于操作表、模式、弹出窗口等。定义预期的操作

最后使用navctrl弹出到上一页(适用于angular routing)

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() 
   });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53543311

复制

相似问题

问Ionic 4硬件返回按钮路由
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ionic 4硬件返回按钮路由EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ionic 4硬件返回按钮路由
EN