Ionic 4 routing caching / history preservation

Ionic Framework ionic-v3
1

Hi,

I have been having an ongoing problem which I haven’t found any clean solutions to, so I decided to repost this with a video demo and github code to better demonstrate how this actually appears to be a problem with routing or caching? Not sure.

To keep it very short, here are the steps:

  1. Login screen, click “Login”
  2. On successful login you see a number of users
  3. Click “Person A”
  4. “Person A” is found in “Case X”
  5. Click “Case X”
  6. Inside “Case X” obviously we see linked “Person A”
  7. Click “Person A” again
  8. Now click “Back” button.

Here is a problem. I expect the back button to take me to Case step #6.

Instead, it takes me all the way back to step #2.

YouTube demo: https://www.youtube.com/watch?v=9RvbZQp8kD8

Github repo: https://github.com/f1vlad/ionic4routing

The cleanest workaround I found was to pass a url param from “Case X” to “Person A”. If param exists, back button would take user from person to case; otherwise, if no location history exists, fall back on default.

1 Like
2

Hey @f1v,

I studied your github repo, and found one issue on routing back stages.

      <ion-back-button defaultHref="home"></ion-back-button>

Remove defaultHref=“home” from your code.

Use this <ion-back-button></ion-back-button>

Hope this will solve your issue.

Thanks.

3

Hi @Priyanka34,

That doesn’t fix it. I just pushed a new commit removing defaultHref.

By definition defaultHref shouldn’t matter there, should it? Because I am navigating from case to a person. Clicking back button should take me to a case. defaultHref should only matter when the app isn’t aware where I came from.

4

you can solve this issue by creating a directive for handle back stages.

Create directive ‘location-back-directive.directive’.

directive/location-back-directive.directive.ts

import {Directive, HostListener} from '@angular/core';
import {Location} from '@angular/common';

@Directive({
  selector: '[app-location-back]'
})
export class LocationBackDirectiveDirective {
  constructor(private location: Location) { }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.location.back();
  }
}

Now create a share module.

share/share.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LocationBackDirectiveDirective } from '../../directive/location-back-directive.directive';



@NgModule({
  declarations: [LocationBackDirectiveDirective],
  imports: [
    CommonModule
  ],
  exports: [
    LocationBackDirectiveDirective
  ]
})
export class ShareModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ShareModule } from './share/share/share.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,ShareModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

people.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button app-location-back fill="clear">
         <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>people</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ul>
    <li><a routerLink="/person" routerDirection="forward">Person A</a></li>
    <li>Person B</li>
    <li>Person C</li>
  </ul>

</ion-content>

people.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { PeoplePageRoutingModule } from './people-routing.module';

import { PeoplePage } from './people.page';

import { ShareModule } from '../../share/share/share.module';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PeoplePageRoutingModule,
    ShareModule
  ],
  declarations: [PeoplePage],
 
})
export class PeoplePageModule {}

Here i just show you a people page code. Use this way in all other pages, when you wants to handle back stages/routing.

Hope this will more clear for you and solve your issue.

Thanks.

5

Thanks Priyanka34, that kind of works technically 100%, however it reloads the previous page and does not gracefully animate back.

Thanks for your time.