Html 如何回到上一屏幕ionic 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43692931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to go back to previous screen ionic 2
提问by hybrid Dev
In ionic q we will use $ionichistory.goback()to go back the previous screen. But in ionic 2 how can we achive that. And i tried this button on click to print the console message . But its not working.
在 ionic q 中，我们将使用$ionichistory.goback()返回上一个屏幕。但是在 ionic 2 中，我们如何才能做到这一点。我试过点击这个按钮来打印控制台消息。但它不起作用。
<ion-buttons left class="loginnavbtn" (click)="goback()">
CANCEL
</ion-buttons>
.js
.js
goback() {
console.log('Click on button Test Console Log');
}
Please help me out. i have two screen . when i go from first screen to next screen. in next screen i have one button called back. When i press that i should be back to first screen. how to so that ?
请帮帮我。我有两个屏幕。当我从第一个屏幕转到下一个屏幕时。在下一个屏幕中，我有一个按钮回调。当我按下它时，我应该回到第一个屏幕。怎么会这样？
My full code :
我的完整代码：
html:
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>
my .js :
我的 .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) {
}
}
my .scss:
我的.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;
}
}
回答by Suraj Rao
Check NavController APIin the docs.
检查文档中的NavController API。
To go to previous page,inject navcontroller in the constructor and call pop().
要转到上一页，请在构造函数中注入 navcontroller 并调用pop().
constructor(private navCtrl:NavController){}
goback() {
this.navCtrl.pop();
console.log('Click on button Test Console Log');
}
Also check syntax for button.
还要检查button 的语法。
<ion-buttons >
<button ion-button left class="loginnavbtn" (click)="goback()">
Cancel
</button>
<!-- left aligned content here -->
</ion-buttons>
回答by Jayaprakash G
The navigation in Ionic works like:
Ionic 中的导航工作方式如下：
1. PUSH Page:
1.推送页面：
pageone.ts
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
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 Page:
2.POP页面：
pagetwo.ts
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
第二页.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>
