如何回到上一个屏幕离子2

Posted 2023-03-05

【中文标题】如何回到上一个屏幕离子2

【英文标题】：how to go back to previous screen ionic 2

【发布时间】：2017-09-27 07:45:56

【问题描述】：

在 ionic q 中，我们将使用$ionichistory.goback()返回上一个屏幕。但在 ionic 2 中，我们如何实现这一点。我在单击时尝试了此按钮以打印控制台消息。但它不起作用。

<ion-buttons left class="loginnavbtn" (click)="goback()">
  CANCEL
</ion-buttons>

.js

goback() 
   console.log('Click on button Test Console Log');

请帮帮我。我有两个屏幕。当我从第一个屏幕转到下一个屏幕时。在下一个屏幕中，我有一个回调按钮。当我按下那个我应该回到第一个屏幕。怎么办？

我的完整代码：

html:

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left class="loginnavbtn" (click)="goback()">

    CANCEL
    <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      LOGIN
    </ion-title>

    <ion-buttons right class="loginnavbtn" (click)="loginbtntap()">
    SAVE
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>


   </ion-content>

我的 .js：

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';



@Component(
  selector: 'page-login',
  templateUrl: 'login.html'
)

export class LoginPage 


 goback() 
    this.navCtrl.pop();

loginbtntap() 
    this.navCtrl.pop();


  constructor(private navCtrl:NavController) 



  

我的 .scss：

page-login 
ion-header 
  .button-md 
    box-shadow: none;
  

  .toolbar-title 
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
  


.loginnavbtn 

  color: #116096 !important;
   font-size: 14px;
    font-weight: 400;

【问题讨论】：

来这个页面你使用this.navCtrl.push(somepage)还是this.navCtrl.setRoot(somepage)的方法？

【参考方案1】：

查看文档中的NavController API。

要转到上一页，在构造函数中注入 navcontroller 并调用pop()。

constructor(private navCtrl:NavController)

goback() 
   this.navCtrl.pop();
   console.log('Click on button Test Console Log');

还要检查button 的语法。

<ion-buttons >
    <button ion-button left class="loginnavbtn" (click)="goback()">
      Cancel
    </button>
    <!-- left aligned content here -->
    </ion-buttons>

【讨论】：

不工作是什么意思？你有错误吗？控制台中有任何日志吗？

也没有日志消息。我把我的完整代码放在我的帖子里。我不知道我错过了什么

我检查问题出在我的自定义 scss 代码中。我编写了该 scss 代码以使标题居中。但现在问题来了。

***.com/questions/43716187/…

您也可以像这样在按钮元素中添加navPop <button ion-button left class="loginnavbtn" navPop>

【参考方案2】：

Ionic 中的导航功能如下：

1.推送页面：

pageone.ts

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';
import  PageTwo from '../pagetwo/pagetwo';

@Component(
  templateUrl: 'pageone.html'
)
export class PageOne 
  constructor(public navCtrl: NavController) 

  push() 
    this.navCtrl.push(PageTwo);
  

pageone.html

<ion-header>
  <ion-navbar>
    <ion-title>Navigation</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button block (click)="push()">Push New Page</button>
</ion-content>

2.POP页面：

pagetwo.ts

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';

@Component(
  templateUrl: 'pagetwo.html'
)
export class PageTwo 

  constructor(public navCtrl: NavController) 

  pop() 
    this.navCtrl.pop();
  

pagetwo.html

<ion-header>
  <ion-navbar>
    <ion-title>Page 2</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button color="secondary" block (click)="pop()">Pop This         
Page</button>
</ion-content>

【参考方案3】：

import  Location  from "@angular/common";

constructor(private location: Location)  

goBack()
  this.location.back();