How to change page in Ionic V2

Question

How to change page in Ionic V2

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Good morning guys, I have a doubt, as a beginner, that I created two pages on Ionic v2 but I do not know how I can navigate between them. Looking at the ionic documentation I saw this navController I adapted the code it gave but it did not work.

login.html

<ion-footer>
<ion-toolbar>
    <p>Nao e cadastrado? <button ion-button clear (click)="pushPage()">cadastre-se</button>
    </p>

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController,App, ViewController } from 'ionic-angular';
import { RegisterPage } from '../register/register';
/**
 * Generated class for the LoginPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  })


export class LoginPage {

  constructor(	public navCtrl: NavController,
   				public navParams: NavParams,
   				public loadingCtrl: LoadingController,
   				public viewCtrl: ViewController,
   				public appCtrl: App) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  presentLoading() {
    this.loadingCtrl.create({
      content: 'Por favor aguarde...',
      duration: 3000,
      dismissOnPageChange: true
    }).present();
  }

  	pushPage() {
	    this.viewCtrl.dismiss();
	    this.appCtrl.getRootNav().push(RegisterPage);
	}

}

ERROR: Runtime Error Uncaught (in promise): navigation stack needs at least one root page

ionic angular ionic2

asked by anonymous 25.05.2017 / 21:52

2 answers

1

Try this:

pushPage() {
    this.navCtrl.pop();
    this.navCtrl.push(RegisterPage);
}

Also check if the page is set in app.module.ts

25.05.2017 / 22:34

Why does not this work on my user control? Why this piece of code is looping infinite?

score 2 · Accepted Answer

If you want the next page to have the option to go back to the top of the screen, use:

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

goToPage() {
   this.navCtrl.push(NoticiaPage);
}

If you want to leave the next screen as the main screen, use:

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

goToPage() {
   this.navCtrl.setRoot(SolicitacaoCodigoPage);
}