Navigating forwards in Angular 7 causes loss of state

Question

Navigating forwards in Angular 7 causes loss of state

I have a situation with my angular 7 Ionic application. When I navigate to a page, I use the following code snippet:

navigateToDetail(entity: User) {

  const navigationExtras: NavigationExtras = {
    state: {
      entity,
      entityId: entity.id
    }
  };

  this.router.navigate([RouteNames.users, entity.id], navigationExtras);
}

On my detail-page-base, I retrieve the routing parameters as shown below:

constructor(protected route: ActivatedRoute, protected router: Router, protected baseProvider: ApiResourceBaseService<T>) {
  this.route.queryParams.subscribe(params => {
    if (this.router.getCurrentNavigation().extras.state) {
      this.entity = this.router.getCurrentNavigation().extras.state.entity;
    }
  });
}

While this setup works fine under normal circumstances, I encounter an issue where the parameters become empty when navigating back using the browser and then navigating forward again.

What would be the best approach to handle navigation in angular 7 in such scenarios?

javascript angular typescript ionic-framework navigation

Answer 1

Answer №1

To resolve the issue, I connected to the router events and reverted the data back to its original value.

this.router.events
        .pipe(filter((event: NavigationEvent) => (event instanceof NavigationStart)))
        .subscribe(( event: NavigationStart ) => {

          console.group( 'NavigationStart Event' );
          // Each navigation sequence is assigned a unique ID. Even "popstate"
          // navigations are essentially "roll forward" navigations with
          // a new, unique ID.
          console.log('navigation id:', event.id);
          console.log('route:', event.url);
          // The "navigationTrigger" can be one of:
          // --
          // - imperative (eg. user clicked a link).
          // - popstate (eg. browser controlled change like Back button).
          // - hashchange
          // --
          // NOTE: Uncertain about what triggers the "hashchange" type.
          console.log('trigger:', event.navigationTrigger);

          // When the navigation event is triggered by a "popstate" event (e.g., back / forward
          // buttons), the "restoredState" property is defined. It contains the ID of the earlier navigation event
          // that the browser is reverting to.
          // --
          // CAUTION: This ID may not be part of the current page rendering.
          // This value is retrieved from the browser and may persist across
          // page reloads.
          if ( event.restoredState ) {
            this.router.getCurrentNavigation().extras.state = event.restoredState;
            console.warn('restoring navigation id:', event.restoredState.navigationId);
          }
          console.groupEnd();
        });
}

Answer 2

To resolve the issue, I connected to the router events and reverted the data back to its original value.

this.router.events
        .pipe(filter((event: NavigationEvent) => (event instanceof NavigationStart)))
        .subscribe(( event: NavigationStart ) => {

          console.group( 'NavigationStart Event' );
          // Each navigation sequence is assigned a unique ID. Even "popstate"
          // navigations are essentially "roll forward" navigations with
          // a new, unique ID.
          console.log('navigation id:', event.id);
          console.log('route:', event.url);
          // The "navigationTrigger" can be one of:
          // --
          // - imperative (eg. user clicked a link).
          // - popstate (eg. browser controlled change like Back button).
          // - hashchange
          // --
          // NOTE: Uncertain about what triggers the "hashchange" type.
          console.log('trigger:', event.navigationTrigger);

          // When the navigation event is triggered by a "popstate" event (e.g., back / forward
          // buttons), the "restoredState" property is defined. It contains the ID of the earlier navigation event
          // that the browser is reverting to.
          // --
          // CAUTION: This ID may not be part of the current page rendering.
          // This value is retrieved from the browser and may persist across
          // page reloads.
          if ( event.restoredState ) {
            this.router.getCurrentNavigation().extras.state = event.restoredState;
            console.warn('restoring navigation id:', event.restoredState.navigationId);
          }
          console.groupEnd();
        });
}

Navigating forwards in Angular 7 causes loss of state

Answer №1

Similar questions

Even after applying trim() function, PHP's return statement still adds spaces unnecessarily

Errors occurred when trying to use Jquery to handle a JSON response

A guide on utilizing ClassName to insert new items into a DIV

What could be causing my Three.js code to fail during testing?

How can I use JavaScript regex to extract the first term to the left of a specific symbol?

Manipulating State in React: How to add a property to an object within an array within a component's state

Issue encountered with ASP.Net Core on AWS Serverless: The middleware for the SPA default page was unable to locate and return the default page '/index.html'

What is the best way to transfer values from an AJAX script to the rest of the Javascript code?

Challenges of performance in EmberJS and Rails 4 API

Leveraging the power of a JavaScript framework within the script tag

The progress bar in Java Script is static and cannot be customized to change colors

Is there a way for me to properly type the OAuthClient coming from googleapis?

What is the correct approach to importing the Select class in JavaScript with WebDriver?

Node.js server experiencing delays due to V8 processing constraints

'ng build' operation halted - Angular

Invoke Selenium using JavaScript

Using PHP to validate a read-only textbox

Establish a connection between servers operating on two distinct ports

Enhancing React Functionality: Increasing React State Following an If Statement

What is the reason for Backbone including model details within {model: {model_property: value,...}} when saving a model?