Is there a way to retrieve data from Angular RC4 routing?

Question

Is there a way to retrieve data from Angular RC4 routing?

Within the app routes:

{ path: 'calculator', component: CalculatorComponent, data: {physical: Physical}},

In the settings component:

if(this.selectedPhysical) {
   this.router.navigate(['/calculator', this.selectedPhysical ]);
}

The result of the navigation attempt is incorrect:

http://localhost:3000/calculator;pK_Physical=4;fK_Measurement=2;dateString=5/22/2016;weight=270;height=70;hips=27;waist=51;neck=18.5

How can I properly pass the data to the route?

In the calculator component, I have the following code. How can I access the data passed in through the route?

ngOnInit() {
    this.route
       .data
       .subscribe(v => this.selectedPhysical = <Physical>v);
            
   console.log("phys = " + this.selectedPhysical);
}

If anyone knows how to achieve this, please share your knowledge.

typescript angular

Answer 1

Answer №1

In order to ensure your code is working with the most updated data, it's important to place the code that relies on this data inside the subscribe(...) callback.

ngOnInit() {

   ** The issue lies here **, despite my attempts to solve it in various ways, nothing seems to work. It always ends up being undefined.

   this.route
       .data
       .subscribe(v => {
            this.selectedPhysical = <Physical>v;
            console.log("phys = " + this.selectedPhysical);
       });

   // unsure about these          
   this.selectedSex = this.userSettings.sex;

   //console.log('route id =' + this.route.snapshot.params.id)
}

Answer 2

In order to ensure your code is working with the most updated data, it's important to place the code that relies on this data inside the subscribe(...) callback.

ngOnInit() {

   ** The issue lies here **, despite my attempts to solve it in various ways, nothing seems to work. It always ends up being undefined.

   this.route
       .data
       .subscribe(v => {
            this.selectedPhysical = <Physical>v;
            console.log("phys = " + this.selectedPhysical);
       });

   // unsure about these          
   this.selectedSex = this.userSettings.sex;

   //console.log('route id =' + this.route.snapshot.params.id)
}

Is there a way to retrieve data from Angular RC4 routing?

Answer №1

Similar questions

Checking the token's validity using the API within the AuthGuard canActivate method in Angular8

The package.json entry for "abc-domains" is not functioning correctly even though it is set to "latest" version

Error429 was received from a GET request made to the Imgur API

Tips for integrating TypeScript with Vue.js and Single File Components

Issue with the close button on ngb-alert not functioning properly

Angular 2: Embracing the Power of Hierarchical Selection

What is the best way to dynamically add or utilize a pipe in Angular 8?

Refreshing the chosen input field within an Angular context

Encountering a memory issue while trying to read and display Excel data in an Angular 2 application

The type 'Observable<void>' cannot be assigned to the type 'Observable<JSON>'

What is the best way to declare multiple types that require specific props?

Why am I encountering numerous errors while attempting to install Juice Shop?

Issue with debugging Azure Functions TypeScript using f5 functionality is unresolved

Declaring a custom Angular Pipe

Leverage the compiler API to perform type inference

Utilizing Next.js and React to interact with Open AI through API requests

Issue with Typescript and react-create-app integration using Express

Issue with hardhat failing to detect balance transfer from smart contract

In order of service - avoid repeating the initial service upon the next user click if the second service was unsuccessful

Tips for triggering an event from a function instead of the window