I'm having trouble navigating from one page to the other in my Ionic 3 based mobile app. I have a link which calls a function named openPage when clicked in my homepage. I expect this to open a second page but it doesn't.
Here is my code:
the link from my HomePage:
<a color="dark" class="dashboardicons" (click)="openPage('FaqsPage')" href="#">
<ion-icon name="ios-information-circle-outline" color="danger"></ion-icon>
<br>FAQs
</a>
home.ts file
import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
openPage(page){
this.navCtrl.setRoot(page);
}
}
faqs.ts file (the second page)
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-faqs',
templateUrl: 'faqs.html',
})
export class FaqsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad FaqsPage');
}
ionViewWillEnter() {
console.log('ionViewWillEnter FaqsPage');
}
ionViewDidEnter() {
console.log('ionViewDidEnter FaqsPage');
}
ionViewWillLeave() {
console.log('ionViewWillLeave FaqsPage');
}
ionViewDidLeave() {
console.log('ionViewDidLeave FaqsPage');
}
ionViewWillUnload() {
console.log('ionViewWillUnload FaqsPage');
}
ionViewCanEnter() {
console.log('ionViewCanEnter FaqsPage');
}
ionViewCanLeave() {
console.log('ionViewCanLeave FaqsPage');
}
}
Every time I click on the link, the second page flashes (appears and then disappears), then I'm redirected back to the homepage. I have logged the life-cycle events of the second page and apparently the page runs through all of them. I have tried with both push() and setRoot() methods using NavController without success. All my pages are lazy loaded. What I'm I doing wrong?
The FaqsPage is a blank page at the moment. It's HTML is as follows:
<ion-header>
<ion-navbar>
<ion-title>Faqs</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding></ion-content>
If you use setRoot
in NavController
it sets the new page as the root page. use push
instead setRoot
.
openPage(page){
this.navCtrl.push(page);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.