Question

下面所有的测试和编码都是针对Android手机完成的。

我使用离子标签创建了一个新的标签项目。我现在在底部的底部有4个标签。现在的问题是，我单击了另一个选项卡上的无视图，然后尝试在手机中使用默认的SwipeToGoBack手势，却无济于事。

如果我进入任何其他页面，则后退手势可以正常工作，但是当我位于选项卡的4页中时，它将不起作用。

我尝试了以下选项：

<ion-router-outlet id="main" [swipeGesture]="true"></ion-router-outlet>

IonicModule.forRoot({
    swipeBackEnabled: true
  }

但是这些没有帮助。我什至可以关闭通过向后滑动而打开的侧边菜单栏。但是无法通过回拨电话进入上一个选项卡。甚至无法关闭应用程序。

如果打开了应用程序并且没有单击其他选项卡，并且我做了向后滑动手势，则该应用程序将关闭，但是一旦我单击其他选项卡，我什至无法退出该应用程序。

我还尝试从平台添加后退按钮侦听器，但这也无济于事。我在tabs.page.ts中添加了以下代码部分：

this.platform.backButton.subscribe(() => {
  navigator.app.exitApp();
});

是否有任何关于如何在手机上向后滑动手势时返回上一个标签的帮助，如果没有上一个标签的历史记录，则最后关闭该应用程序？

链接已尝试：

Answer 1

export class TabsPage {
  navigationProccess:Array<any> = [];
  lastTabName:string = "";
  currentBack:string = "";
  constructor(private platform: Platform,private router:Router,private navctrl:NavController) {

    this.router.events.subscribe((event:RouterEvent)=>{

      if(event.url !== undefined){
        if(this.lastTabName !== event.url && event.url !== this.currentBack){
          // we put last tab name not equal event.url so the event don't go twice through array
          // we put event.url not equal current back that is since when navcontroll in back button go back its considered a router event and we don't need it to be inserted again
          this.pushTabHistory(event.url);
        }
        this.lastTabName = event.url;
      }
    });

    this.platform.backButton.subscribeWithPriority(99999999,async()=>{
      let pushHistoryCount = this.navigationProccess.length;
      if(this.router.url.includes('tabs') == true && pushHistoryCount > 1){
        let url = this.navigationProccess[pushHistoryCount-2].url;
        this.navigationProccess.splice(pushHistoryCount-1, 1);
        this.currentBack = url;
        //currentBack should be assigned before navgiate back
        this.navctrl.navigateBack(url);
      }
    })

  }

  pushTabHistory(tabName:string){
    let navHistory = {
      url:tabName
    };
    this.navigationProccess.push(navHistory)
  }
}

伴侣我已经编辑了答案，而您在正确的地方。选项卡没有routeroutlet.cangoBack（），因为选项卡和tabs / tab1ortab2ortab3被认为是一个级别，不能向后移动。在这里，我创建了一种在数组内进行导航历史记录并从该数组来回导航的方法，但是从选项卡页面进行订阅又是这样，因为您可以将其仅用于测试，所以我做到了这一点。

但是，作为一种高级方法，我们开始-> 1）创建服务标签：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TabnavService {
  public navigationProccess:Array<any> = [];
  public lastTabName:string = "";
  public currentBack:string = "";
  constructor() { }

  pushTabHistory(tabName:string){
    let navHistory = {
      url:tabName
    };
    this.navigationProccess.push(navHistory)
  }
}

2）在您的标签页内部：

import { TabnavService } from './../services/tabnav.service';
import { Router, RouterEvent } from '@angular/router';
import { Component } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  constructor(private platform: Platform,
    private router:Router,
    private tabNavService:TabnavService) {

      if(this.platform.is('android')){
        this.router.events.subscribe((event:RouterEvent)=>{

          if(event.url !== undefined){
            if(this.tabNavService.lastTabName !== event.url && event.url !== this.tabNavService.currentBack){
              // we put last tab name not equal event.url so the event don't go twice through array
              // we put event.url not equal current back that is since when navcontroll in back button go back its considered a router event and we don't need it to be inserted again
              this.tabNavService.pushTabHistory(event.url);
            }
            this.tabNavService.lastTabName = event.url;
          }
        });
      }
  }


}

3）在app.component.ts中：

import { TabnavService } from './services/tabnav.service';
import { Component, ViewChild } from '@angular/core';

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  @ViewChild(IonRouterOutlet,{static:false}) routerOutlet:IonRouterOutlet;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router:Router,
    private navctrl:NavController,
    private tabNavService:TabnavService
  ) {
    this.initializeApp();
  }

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


      this.platform.backButton.subscribeWithPriority(99999999,async()=>{
        let pushHistoryCount = this.tabNavService.navigationProccess.length;
        if(this.router.url.includes('tabs') == true && pushHistoryCount > 1){
          let url = this.tabNavService.navigationProccess[pushHistoryCount-2].url;
          this.tabNavService.navigationProccess.splice(pushHistoryCount-1, 1);
          this.tabNavService.currentBack = url;
          //currentBack should be assigned before navgiate back
          this.navctrl.navigateBack(url);
        }else if(this.router.url.includes('tabs') == true && pushHistoryCount <2){
      // here is the array less than 2 which is one (you could make it ==0 but i make it if app glitches or something)
      //so if app is on main start point it exit on back pressed
      navigator['app'].exitApp();
    }
      });


    });
  }
}

多数民众赞成在^ ^。任何帮助只需在此处再次评论^ ^。

ionic 5标签滑动即可返回，不更改标签

1 个答案: