在 ionic 4 中返回堆栈时出现问题

Question

我在 Angular 做我的第一个项目，但我不知道如何做一件事，我一直在搜索，但没有找到我想要的东西。

这个结构是下一个。主页 -> 教程页面 -> 登录页面

当您到达登录页面并将出现在上方的物理后退或后退按钮虚拟地放在左侧时，我想要的是 return 到主页。我一直在尝试不同的事情，但对我没有任何帮助，我的问题是我不知道如何在按下时进行事件调用。谢谢

我的login.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams, private platform: Platform) {
  }

  ngOnInit() {
    this.platform.backButton.subscribe(() => {
      this.navCtrl.popToRoot();
    });
  }

  goToSignUp() {
    let id = this.idRecibido;
    this.navCtrl.push("SignupPage", {id});
  }

}

我还需要它来使用屏幕上的虚拟按钮

Answer 1

您需要注入 Platform 服务并订阅其 backButton Observable，如下所示：

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams, private platform: Platform) {
  }

  ngOnInit() {
    this.platform.backButton.subscribe(() => {
      // Physical button pressed
    });
  }

  goToSignUp() {
    this.navCtrl.push("SignupPage");
  }

}

Answer 2

我的问题的完美解决方案就是这个。

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ngOnInit() {
    this.navCtrl.removeView(this.navCtrl.getPrevious());
  }

  goToSignUp() {
    let id = this.idRecibido;
    this.navCtrl.push("SignupPage", {id});
  }

}

在 ionic 4 中返回堆栈时出现问题

Problem when going back in the stack in ionic 4

typescript

angular

ionic4