时间戳

首页 > 解决方案 > 应用程序在按下后退按钮时关闭而不是返回 - Ionic 5

javascript - 应用程序在按下后退按钮时关闭而不是返回 - Ionic 5

问题描述

我正在尝试构建一个离子应用程序。当我打算转到另一页并返回时。我关闭背景。我相信我已经以正确的方式实现了路由器和导航。关于如何调试或可能有什么问题的任何建议？

主页

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(
    private authService: AuthService,
    public router: Router,
    public navCtrl: NavController,
  ) { }

  goToVendors(vendor: any): any {
    this.navCtrl.navigateForward([`/dashboard/vendors`]);
  }
}

供应商页面

<ion-header>
  <ion-toolbar mode="md">
    <ion-buttons slot="start" >
      <ion-button color="dark" [routerLink]="['/dashboard/home']" routerDirection="backward">
        <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>    
  </ion-toolbar>
</ion-header>

标签： javascriptangulartypescriptionic-frameworkionic4

解决方案

如果问题与硬件后退按钮有关，这可能会有所帮助

app.component.ts

import {Component, ChangeDetectorRef} from '@angular/core'
import {Platform} from '@ionic/angular';
import {Router} from '@angular/router'
import {Plugins} from '@capacitor/core';

const {App} = Plugins;

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

    exitPages: Array<string> = [
        '/dashboard/home',
        '/welcome'
    ];

    constructor(
        private platform: Platform,
        private router: Router,
        private changeDetectorRef: ChangeDetectorRef,
    ) {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {

            // Initalizes android required methods
            if (this.platform.is('android')) {
                App.addListener('backButton', (state) => this.backButtonListener());
            }
        });
    }

    backButtonListener() {
        const currentRoute = this.router.url;
        // Close app if current route is in exit pages
        if (this.exitPages.find(p => p === currentRoute)) {
            App.exitApp();
        } else {
            window.history.back();
            this.changeDetectorRef.detectChanges();
        }
    }

}

通过这种方式，您可以使用硬件按钮设置要关闭应用程序的页面，或者导航到上一页

推荐阅读