如何在使用 NavController 的 app.html 上使用 Ionic 3 组件？答案

【问题标题】：How do I use a Ionic 3 component on my app.html that uses NavController?如何在使用 NavController 的 app.html 上使用 Ionic 3 组件？
【发布时间】：2018-10-23 09:05:41
【问题描述】：

我有一个使用 NavController 的 Ionic 3 组件：

constructor(public navCtrl: NavController) {}

当我在延迟加载的页面上使用这个组件时，它可以完美运行。当我通过将它放在我的 app.html 文件中在全局导航中使用相同的组件时，我收到此错误：

运行时错误无法读取 null 的属性 'children'

如果我从构造函数中删除 navCtrl，这个错误就会消失。我需要做些什么不同的事情？

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

您可以使用组件交互来在子组件中使用父导航控制器。 https://angular.io/guide/component-interaction

// component.ts
@Input('nav') nav: NavController;


functionUsingNavCtrl() {
   this.nav.push('NewPage');
}

// app.html
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
<component [nav]="nav"></component>

// app.ts
@ViewChild(Nav) nav: Nav;

【讨论】：