How to navigate in Ionic 4?

Ionic Framework
1

I have a a project that was developed using Ionic 3. Since I upgraded to Ionic 4 I’m experiencing a lot of problems. The documentation about Ionic 4 today is very poor, on Ionic site and also in external sources.

Right now I’m struggling with the navigation. I used the Angular Router object to navigate between pages,
Like this:

router.navigate([‘pageName’], {queryParams: params, preserveFragment: true});

But the Android back button does not work with this method.

So I would like to know how to navigate between pages in Ionic 4 just like I used to do with the NavController in Ionic 3.

Thanks,

Thanks.

2 Likes
2

The preferred way to navigate between routes in Ionic 4 in templates is to use href and routerDirection:

<ion-item href="/some-route" routerDirection="forward">

or to navigate programatically you should still use NavController, i.e:

this.navCtrl.goForward('some-route');
this.navCtrl.goBack('some-route');
this.navCtrl.goRoot('some-route');
10 Likes
3

Hi joshmorony, thanks for your answer.
I tried this method too, the problem is that I need to pass some data to the child page, so I tried something like that:

this.navctrl.goForward(‘teste-page’, true, {queryParams: {id: 123}, relativeTo: this.activedRoute});

However I cannot get the param using the NavParams. When I tried it I got this error

core.js:1633 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TestePagePage -> NavParams]:
StaticInjectorError(Platform: core)[TestePagePage -> NavParams]:
NullInjectorError: No provider for NavParams!

Is there some way to get params using this new NavController?

The android back button does not work with this method too.

Thanks again

2 Likes
4

You should set up a route parameter in your route, e.g:

{ path: 'myroute/:id', ...  }

and then just navigate to that route:

this.navCtrl.goForward('myroute/123');

Then you can grab that information using ActivatedRoute from @angular/router:

this.route.snapshot.paramMap.get('id');

In the example above, you would need to inject ActivatedRoute as route through your constructor.

5 Likes
5

Hi joshmorony I was able to pass parameter using a service, but the hardware back button is not working.
I mean, I navigate from page A to page B, if I hit back button on page B the app does not go back to page A.

I’m really thnking about downgrade back to Ionic 3. I’m on this trask since yesterday and there is almost no docs about ionic 4. This is very frustrating and time consuming.

Thanks

2 Likes
6

using:
import { LoadingController, AlertController, Nav } from “@ionic/angular”;

constructor(public nav: Nav){
}

goBack(){
this.nav.Pop();
}

7

what about push to another page

this.navCtrl.push('RegisterPage');

after i switch to ionic 4 from 3
any time i used push i was route to RegisterPage and instantly(about 1 sec) backed to loginpage.
this will happend if i go to any other page

this.navCtrl.push('anyPage');
8

Follow this.

9

Follow this.

1 Like
10

I’m not sure if it’s to late but for everyone who’s looking for an answer to this:

With Ionic 4 you have two ways of navigate through pages.

Using the Angular Router (web-like) or the NavController (mobile-like) or a mix of both.

If we have Page1 and Page2 using just the Angular Router we could do something like

1.- Register your route on the module router

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: 'page1', component: Page1 }, { path: 'page2', component: Page2 }])
  ],
  declarations: [Page1, Page2]
})

2.- On the template we can use

From Page 1

<ion-item routerLink="/page2">To Page2</ion-item>

Notice that you can use routerLink on any HTML tag. Including not Ionic web components.

This navigation will push Page2 into the current stack (Stack === Root component which have an )

The other way, is using the Ionic NavController. This is really useful when you don’t know to which page are you going and you just want to pop a page.

You can use this programatically like @joshmorony suggested.

If you use

<ion-item href="/page2" routerDirection="forward"></ion-item>

On your template. You will lose state on the app on the navigation. This kind of navigation triggers a navigation like SSR. This one can’t be used on any web component.

11

That article was very helpful. Thanks!

12

i want when i click next it should go to next and play sound of the next image but the next or previous button will go to the next image and play previous image sound. the images are working fine but it not picking the next sound any suggestion

next() {
this.slides.slideNext();… it works fine with the image but it doesnt pick that right sound
Any simple idea to do that ?