En ionic q usaremos $ionichistory.goback() para volver a la pantalla anterior. Pero en ionic 2, ¿cómo podemos lograr eso? Y probé este botón al hacer clic para imprimir el mensaje de la consola. Pero no funciona.
<ion-buttons left class="loginnavbtn" (click)="goback()"> CANCEL </ion-buttons>.js
goback() { console.log('Click on button Test Console Log'); }Por favor, ayúdame. tengo dos pantallas cuando voy de la primera pantalla a la siguiente pantalla. en la siguiente pantalla tengo un botón llamado de vuelta. Cuando presiono eso, debería volver a la primera pantalla. como para eso?
Mi código completo:
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>mi .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) { } }mi .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; } }Compruebe la API de NavController en los documentos.
Para ir a la página anterior, inyecte navcontroller en el constructor y llame a pop() .
constructor(private navCtrl:NavController){} goback() { this.navCtrl.pop(); console.log('Click on button Test Console Log'); }Compruebe también la sintaxis del botón .
<ion-buttons > <button ion-button left class="loginnavbtn" (click)="goback()"> Cancel </button> <!-- left aligned content here --> </ion-buttons>La navegación en Ionic funciona como:
1. Página PUSH:
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); } }paginauno.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.Página POP:
paginados.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(); } }paginados.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>import { Location } from "@angular/common"; constructor(private location: Location) { } goBack(){ this.location.back(); }