Unable to access data on route data. angular 2 RC4

[John Baird]

in app routes:
{ path: 'calculator', component: CalculatorComponent, data: {physical: Physical}},
   
in settings comoponent:

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

in calculator component:

ngOnInit() {

   ** problem is here **, I've tried every combination of things and nothing works.  It's always undefined.

   this.route
       .data
       .subscribe(v => {

                  this.selectedPhysical = <Physical>v);
                  console.log("phys = " + this.selectedPhysical);

       }

}

[Steven Luke]

First, are you sure you want to use Data for that?  Data is defined at the point where the route configuration occurs - usually at the start of the application, NOT when the user navigates.  So you should make sure that the selectedPhysical is defined and has the intended value when the settings component is first loaded.  Then, when you want to retrieve the data in the calculator component, you need to inject the RouteData in:

export class CalculatorComponent {
    selectedPhysical : Physical;


    constuctor(data: RouteData) {
        this.selectedPhysical = data.get("physical");
    }
}

Remember that this is only useful if the selectedPhysical doesn't change.  If it does change by user interaction/during the run of the app, then you need to use parameters to do pass the information along.

Or maybe you can put the data in programmatically if the physical is an Object and not conducive to passing ids around:

//in the settings component someplace...

    routeForCalculator = findCalculatorRoute(injectedRouter);
    routeForCalculator.data['physical'] = this.selectedPhysical;

I am less sure of this second approach, but it would be worth a try.  In my mind, if Physical exists, it should exist in some service which you can inject into the calculator, use an id in the calculator route as a parameter (rather than data), and pull the Physical out of the service in calculator.  This would probably provide better navigation (deep linking, back/forward browsing).  But maybe your situation doesn't allow that...

[Naturometics, Inc.]

I ended up putting it in a service and injecting it.  Thanks. ..

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/KbDLqsxZDfA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.