ionic 2如何返回上一界面

Question

在 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;
}
}

原文由 hybrid Dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 Suraj Rao 发布，翻译遵循 CC BY-SA 3.0 许可协议