在 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;
}
}
最佳答案
检查 NavController API在文档中。
要转到上一页,在构造函数中注入(inject) 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>
关于html - ionic 2如何返回上一界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43692931/