当我推送页面时，Ionic 3 应用程序重定向到根页面

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