Is there a way to listen for router config Data subscription upon NavigationEnd event?

Question

Is there a way to listen for router config Data subscription upon NavigationEnd event?

At the moment: I'm using router.events to fetch information from

{path: '', component: HomeComponent, data:{header:true}},

router configuration

ngOnInit() {
      this.router.events.filter(e => e instanceof NavigationEnd).subscribe(event => {
          console.log(this.route.firstChild.data.value.header); //fetches the correct data but also generates a type error
      });
  }

This method retrieves the accurate data from the router config (

this.route.firstChild.data.value.header

) but triggers the following error.

ERROR in src/app/app.component.ts(29,52): error TS2339: Property 'value' does not exist on type 'Observable<Data>'.

I believe I need to subscribe to the data in a certain way because it's an observable. However, my attempts so far have been unsuccessful

javascript angular typescript

Answer 1

Answer №1

To retrieve a value from the data property, you can do the following:

For instance:

const fetchedData$ = this.route.firstChild.data.retrieve(1);

this.router.events.filter(event => event instanceof NavigationEnd).switchMap(() => fetchedData$).subscribe((result) => // result )

Answer 2

To retrieve a value from the data property, you can do the following:

For instance:

const fetchedData$ = this.route.firstChild.data.retrieve(1);

this.router.events.filter(event => event instanceof NavigationEnd).switchMap(() => fetchedData$).subscribe((result) => // result )

Is there a way to listen for router config Data subscription upon NavigationEnd event?

Answer №1

Similar questions

Reinstall software using the information in the package-lock.json file

The instance of my ObjectType is coming back as an empty entity

When attempting to convert large objects into JSON using JSON.stringify, a RangeError is thrown due to

What is the proper way to enable the Google Analytics cookie only once another consent cookie has been set and is marked as "true"?

Menu options are neatly displayed alongside video player without any overlap

How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

Typescript conversion: Changing a relational array into a tree object

Retrieving Information with the Fetch API in Node.js and Storing it in a MongoDB Database

Error: Trying to assign a value to a null property

Troubles arise when hovering over and connecting endpoints in jsPlumb

The MongoDB object type is not stored

Enhancing class functionality with decorators in TypeScript

Transforming XML API data into JSON format using Angular framework

Tips on creating animations for elements that are triggered when scrolling and become visible

How to handle a property that is not found in a combined type in TypeScript?

What is the best way to incorporate a background image in a Bootstrap tooltip?

Guide to filtering out cookies using express-winston

Reset the dropdown list back to its initial state

Restangular failing to apply headers during post requests

Is it possible to limit sections of a model that have been cut off using THREE.js?