Let a page navigate to itself, adding a new instance to the nav stack

Question

In Ionic 4.1 / Angular 7.2.2, when navigating between pages, this works fine:

<a [routerLink]="'/myPage'" [routerDirection]="'forward'">Navigate!</a>

However I am now in a position where I wish to navigate from Route A to Route A. I.e. have a link on my HomePage, that opens a new instance of HomePage on top of the navstack.

Both pages share the same route in app-routing.module.ts, namely:

{ 
  path: 'mypath/:id', 
  component: HomePage
}

Since the value of :idis different, how the page renders will differ. I need two (or more..) different instances of the HomePage in the navstack, since backward navigation should also be possible.

What is the recommended way to solve this with Ionic and the Angular router?

Answer 1

The problem is a missing RouteReuseStrategy

This issue is specifically related to Ionic and it's <ion-back-button>.

The default behavior of Angular is to reuse components when only the parameters change. This won't add components to your navigation stack.

To solve this problem, you have to add the RouteReuseStrategy provided by @ionic/angular in the providers array of your app.module.ts

import { IonicRouteStrategy } from "@ionic/angular";

{
  provide: RouteReuseStrategy,
  useClass: IonicRouteStrategy
}

Answer 2

I don't really understand your problem, but Angular don't let you navigate to the same url twice by default, you have to enable that.

onSameUrlNavigation: 'reload' | 'ignore'    
How to handle a navigation request to the current URL. One of:

'ignore' : The router ignores the request.
'reload' : The router reloads the URL. Use to implement a "refresh" feature.

https://angular.io/api/router/Router#config

Answer 3

To redirect to the same page in Angular you need to do this:

<a routerLink=".">Navigate!</a>

This is just like a relative path that tells Angular i want to stay in the current route.

Answer 4

You can use <ion-tabs>

   <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon src="assets/icons/navbar/home.svg" size="large"></ion-icon>
          <ion-label>home</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

Answer 5

You can use ActivatedRoute:

export class Component implements OnInit {

  constructor(private _router:Router,
              private _route:ActivatedRoute){}

  ngOnInit() {

        this._route.params.subscribe(params => {
        this.param = params['yourParam'];
        this.getData(this.param); // reset and set based on new parameter this time
    });
  }

    getData(id) {} // get data from API

}