Ion-nav push method not working in Ionic 4

Ionic Framework
1

I am using Ionic v4 and using router navigation for all page navigation/routing.

However, I have a peculiar case requirement where I wish to push new components on to the stack without affecting the app overall router (Ionic 4 document - ionicframework.com/docs/api/nav). I am using a slide-in menu (split-pane) that needs to have its own page stack.

My currentPage html (current-page.page.html) has a button component -

<ion-button (click)="goToNextPage()">Next Page</ion-button>

My currentPage script file (current-page.page.ts) has the following code -

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { NextPage } from '../next-page/next-page.page';

@Component({
  selector: 'current-page',
  templateUrl: './current-page.page.html',
  styleUrls: ['./current-page.page.scss'],
})
export class CurrentPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  goToNextPage () {
    this.navCtrl.push('NextPage');
  }

  ngOnInit() {
  }

}

However, I get the format error as Property 'push' does not exist on type 'NavController'

Not sure how to use the push method properly. Any help will be appreciated.

2

Navigation in ionic 4 is now different… it uses angular routing now… check this: ionic 4 page navigtion

3

you have to remove NavController from your ts file and you have to use

 this.router.navigate(['path'])

(you can find your path from your app.routing.module or tabs.router.module)

instead of NavCtrl.push()

1 Like
4

Hi do you have any solution?
We migrating v3 to v4 and using tabs with router, but also want to be able to push and pop components to navigation stack within the tabs. Because those logic is to complex to rewrite in angular router way.
I found this ion-nav, but there is no documentation how to use it, or how to combine it with angular router.


Only if I add the tag inside the tab component then I’m abble to push components, but the ion nav is between the parent tabs page header and footer.

5

Problem with this functionality is you cannot push the page. i.e. I am on dashboard and I clicked on user Profile where I have User profile page and it contains Reaction tab in it which redirects to post that user(1st User) liked and on that post page I again clicked on user details(2nd User) to redirect to any user’s profile page then in that situation User data is not getting update. It showing same user that I previously visited. Some how I manage to update data but in that case when I pop the page it redirects me on Dashboard where from I started not on That post from where i opened the 2nd user Profile page