Move from getComponent('nav') to @ViewChild

Hi,

I still did not find a solution with my issue when the getComponent support disappeared to be replaced by @ViewChild. The issue is my ‘this.nav’ is undefined.

Hope someone will figure out what is going wrong with my code. Thanks in advance

dashboard.ts

  menuSelected(menu) {      
    this._nav.push(menu.page, {
       unitsList: unitsList   <-- this will call a new view, here, units.ts
    });   
  }

units.ts

  constructor() {
    this._unitsList = navParams.get('unitsList');
  }

units.html

<ion-header>
  <ion-navbar>
    ...
  </ion-navbar>
<ion-header>
  
<ion-content>      
  <units-list [unitsList]="_unitsList"></units-list>
</ion-content>

units-list.component.ts

import { IONIC_DIRECTIVES, Nav, LoadingController } from 'ionic-angular';
import { Component, Input, ViewChild } from '@angular/core';
import { UnitTabsPage } from '../unit/unit-tabs';

@Component({
  selector: 'units-list',
  templateUrl: 'build/pages/components/units-list.component.html',
  directives: [IONIC_DIRECTIVES]
})

export class UnitsListComponent {
  @Input() unitsList: IUnitInfo[];

  @ViewChild(Nav) nav: Nav;  **<-- not sure about this line**
  
  constructor() {
    ...
  }
  
  unitSelected (event, unit: IUnitInfo) {
    
    // Need to grab the parent nav in order to push outside
    //let nav = this._app.getComponent('nav');

    this.nav.push(UnitTabsPage);  <-- this.nav is undefined!
  }    
}

Please try to change your component units-list.component.ts to:

import { IONIC_DIRECTIVES, NavController, LoadingController } from 'ionic-angular';
import { Component, Input, ViewChild } from '@angular/core';
import { UnitTabsPage } from '../unit/unit-tabs';

@Component({
  selector: 'units-list',
  templateUrl: 'build/pages/components/units-list.component.html',
  directives: [IONIC_DIRECTIVES]
})

export class UnitsListComponent {
  @Input() unitsList: IUnitInfo[];
  constructor(private nav: NavController) {
    ...
  }
  
  unitSelected (event, unit: IUnitInfo) {
    this.nav.push(UnitTabsPage); 
  }    
}

and things should work again.

1 Like

It was too simple!!! Thanks! :slight_smile: