如何在ionic2中显示组件中的页面

Question

我在“src”目录中创建了一个组件。在此组件中，当在HTML中单击按钮时会触发一个函数。在此函数中，我想调用离子页面（测试页面）。由于离子2使用NavController及其pop，push..etc方法维护堆栈以显示页面，因此当我使用组件中的.push（）方法时会显示错误。我已完成所有导入，链接app.module.ts声明数组和entryComponents数组中的页面。这是错误消息

错误错误：StaticInjectorError [NavController]：StaticInjectorError [NavController]：NullInjectorError：没有NavController的提供程序！

我找不到任何解决方案

组件代码

import { NavController,Platform, DomController, ActionSheetController, 
Events, Slides  } from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';
import { IonPullUpFooterState } from 'ionic-pullup';
import {mytestPage} from '../../pages/mytest/mytest';

@Component({
   selector: 'pull-up-drawer',
   templateUrl: 'pull-up-drawer.html'
})

export class PullUpDrawerComponent {
    constructor(public events: Events, public actionSheetCtrl: 
    ActionSheetController,public navCtrl:NavController) {}

    //when button click from html
    buttonClick(){
       this.navCtrl.push(mytestPage);
    }
}

Answer 1

这个东西不起作用，因为你不能将navController注入根页面。

试着这样做：

constructor(public events: Events, public actionSheetCtrl: 
ActionSheetController,public app: App) {}


buttonClick(){
   this.app.getRootNav().push(mytestPage);
}

那么这是一种方法。如果这不起作用：

在HTML即pull-up-drawer.html中执行此操作

<ion-nav [root]="rootPage"></ion-nav>

在你的.ts文件中设置rootPage = mytestPage;

希望能帮助到你！