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

Question

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

constructor(public navCtrl: NavController) {}

当我在延迟加载的页面上使用此组件时，它可以完美运行。当我在全局导航中使用相同的组件并将其放置在app.html文件中时，出现此错误：

  

运行时错误无法读取null的属性“子级”

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

Answer 1

您可以使用Component Interaction在子组件中使用父NavController。 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;