web-dev-qa-db-fra.com

comment revenir à l'écran précédent ionic 2

Dans ionic q, nous utiliserons $ionichistory.goback() pour revenir à l'écran précédent. Mais dans ionic 2 comment pouvons-nous y parvenir. Et j'ai essayé cliquez sur ce bouton pour imprimer le message de la console, mais cela ne fonctionne pas.

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

. js

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

Sil te plait aide moi. j'ai deux écran. quand je passe du premier écran au prochain écran. dans l'écran suivant, j'ai un bouton rappelé. Lorsque j'appuie, je dois revenir au premier écran. comment faire ça?

Mon code complet:

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>

mon .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) {



  }

}

mon .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;
}
}
htmlangularionic2hybrid-mobile-app
6
hybrid Dev

Vérifiez NavController API dans les documents.

Pour aller à la page précédente, injectez navcontroller dans le constructeur et appelez pop().

constructor(private navCtrl:NavController){}

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

Vérifiez également la syntaxe pour bouton .

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

La navigation dans Ionic fonctionne comme:

1. Appuyez sur Page:

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 Page:

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>
5
Jayaprakash G