Ошибка: не удается прочитать свойство 'nativeElement' неопределенного при использовании ионной маршрутизации

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. Что вы можете получить из экземпляра приложения.

Вы можете использовать что-то вроде этого -

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 из вашего компонента.