错误：使用离子路由时无法读取未定义的属性“nativeElement”答案

【问题标题】：Error: Cannot read property 'nativeElement' of undefined when Using Ionic Routing错误：使用离子路由时无法读取未定义的属性“nativeElement”
【发布时间】：2018-12-12 04:37:40
【问题描述】：

我有一个离子应用程序。其中我的应用组件的 HTML 如下所示。

<ion-header>
    // some header related code here
</ion-header>
<ion-content>
  <ion-nav class="outline" [root]="rootPage"></ion-nav>
</ion-content>
<ion-footer>
  <footer-component></footer-component>
</ion-footer>

在我的页脚组件中，我有一个按钮，每当单击时，它都会将我的应用程序发送到起始页。以下是点击该按钮时调用函数 pushtoStartPage 的组件 -

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'footer-component',
  templateUrl: 'footer.html'
})
export class FooterComponent {

  text: string;

  constructor(public navCtrl: NavController) {
  }


  pushtoStartPage() {
    this.navCtrl.push('StartPage');
  }

}

每当我点击该按钮时，我都会收到此错误 - 无法读取未定义的属性“nativeElement”。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

这看起来像是一个问题，因为您的页脚组件不在您的导航堆栈中。要使用路由，您必须获取 Rootnav。您可以从 App 实例中获取。

你可以使用这样的东西 -

import { Component } from '@angular/core';
import { App } from 'ionic-angular';

@Component({
  selector: 'footer-component',
  templateUrl: 'footer.html'
})
export class FooterComponent {

  text: string;

  constructor(private app: App) {
  }


  pushtoStartPage() {
    this.app.getRootNav().push('StartPage');
  }

}

并从您的组件中移除 NavController。

【讨论】：