Tips for accessing a RouterState from the @ngxs/router-plugin before and during the initialization of other states

Question

Tips for accessing a RouterState from the @ngxs/router-plugin before and during the initialization of other states

Previously, in an Angular 8.0.0 and 3.5.0 NGXS application, I successfully retrieved the RouterState using SelectSnapshot from the @ngxs/router-plugin within other states before component rendering. However, in my latest application, the RouterState now returns as undefined, seemingly not initialized before other states begin execution. This has prevented me from accessing SelectSnapshot in my components. this feature was crucial for page refreshes. Can someone guide me on how to achieve this with NGXS?

I attempted to use the new RouterDataResolved parameters within the state but encountered issues.

I have created a simple StackBlitz example demonstrating how I previously accessed the router state. Is there something I am missing or is there a specific setting required? https://stackblitz.com/edit/angular-nm7cj7

angular typescript angular8 ngxs

Answer 1

Answer №1

Why not simply choose the RouterState like any other state using select in your code?

export class AppComponent  {
    constructor(private store: Store) {
      this.store.select(RouterState).subscribe((value) => {
        console.log(value);
      });
  }
}

Perhaps it would be more beneficial to utilize the existing @ngxs/router actions rather than creating custom GetRouterState functionality.

Take a look at router.actions.ts on the NGXS repository for reference.

Answer 2

Why not simply choose the RouterState like any other state using select in your code?

export class AppComponent  {
    constructor(private store: Store) {
      this.store.select(RouterState).subscribe((value) => {
        console.log(value);
      });
  }
}

Perhaps it would be more beneficial to utilize the existing @ngxs/router actions rather than creating custom GetRouterState functionality.

Take a look at router.actions.ts on the NGXS repository for reference.

Tips for accessing a RouterState from the @ngxs/router-plugin before and during the initialization of other states

Answer №1

Similar questions

Is it possible to generate a Date object from a predetermined string in typescript?

Cannot assign type void to 'Intrinsic Attributes & Dispatch<SetStateAction<>>'

Upgrade from using fetch to utilize await in order to achieve the same outcome

Issue with validating the date picker when updating user information

Troubleshooting Angular 2 Component: Why is console.log not functioning in Typescript?

After upgrading from angular version 7.0 to 8.0, I realized that the target in the tsconfig.json file remained unchanged

The latest version of Angular2 has not been installed correctly

typescript set parameter conditionally within a function

Record the success or failure of a Protractor test case to generate customized reports

Creating a dynamic linear gradient background color using Angular 2 binding

Issue: TypeError - 'process.env' can only accept a configurable while installing windows-build-tools

Using the TranslateService in Angular to externalize an array of strings

How can I specify a "router" member variable in Angular?

Issues with Angular routing after upgrading to Angular 4

Collaborating on data through module federation

I encountered a SyntaxError while parsing JSON due to an absence of a number after a minus sign at position 1

Encountering a Pulumi problem during infrastructure packaging: Unable to utilize an import statement beyond a module

Using the ASP.NET parameter or variable in both the application settings and application build events

Error in Firebase Functions: Promises must be properly managed

Combining angular's CLI project with a groovy Gradle application