當我推送頁面時，Ionic3應用程序重定向到RootPage

Question

我在基於Ionic 3的移動應用程序中無法從一頁導航到另一頁。 我有一個鏈接，當我在主頁中單擊該鏈接時，它將調用一個名為openPage的函數。 我希望這可以打開第二個頁面，但是不會。

這是我的代碼：

我主頁上的鏈接：

<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文件

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文件（第二頁）

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');
  }
}

每次單擊鏈接時，第二頁閃爍（出現，然后消失），然后將我重定向回首頁。 我記錄了第二頁的生命周期事件，顯然該頁面貫穿了所有事件。 我已經嘗試使用NavController同時使用push（）和setRoot（）方法，但均未成功。 我所有的頁面都是延遲加載的。 我做錯了什么？

FaqsPage目前是空白頁。 它的HTML如下：

<ion-header>
    <ion-navbar>
        <ion-title>Faqs</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding></ion-content>

Answer 1

如果您在NavController使用setRoot ，它將新頁面設置為根頁面。 使用push代替setRoot 。

openPage(page){
    this.navCtrl.push(page);
}