Question

我有离子应用。我的应用程序组件的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'。有人可以帮我吗？

Answer 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。

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

1 个答案: