Send JSON from one component to another using routing and not display on URL?

Question

I am trying to pass JSON on routing URL here is my

app.route.ts code

 {path: 'calculator', component: CalculatorComponent,data : {some_data : null}},

and my code to route the data is

 this.router.navigate(['/home/calculator',  {some_data:this.loanData}]);

and the calculator.ts have the oninit method code is like this

import {ActivatedRoute} from '@angular/router';

    constructor(private route: ActivatedRoute) {}
    sub
    ngOnInit() {
        this.sub = this.route
            .data
            .subscribe(v => console.log(v));
    }

output is like this

{"some_data":null}

the problem is it's not showing the json, I passed from the ts first component

In route params you should only pass data that you want to be reflected in the browser URL bar. router data is only for static data. You can not send different data to the same route it always has to be the same.use a shared service for this use case. — Lia
– Lia, Commented Jun 1, 2018 at 12:35
can you explain or send me reference link because i don't know about it — bhaumik shah
– bhaumik shah, Commented Jun 1, 2018 at 12:37
In Angular 5, anyway, you should be able to ... ngOnInit() { this.myVar = this.route.snapshot.data['some_data']; } — mittal bhatt
– mittal bhatt, Commented Jun 1, 2018 at 12:37
Make sure you use $router.current.params or $routeParams if you want to grab these values in the router, as described on AngularjS documentation — Protozoid
– Protozoid, Commented Jun 1, 2018 at 12:40

mittal bhatt · Accepted Answer · 2018-06-01 13:31:13Z

1

    Is there a reason you want to navigate by url why not use the navigate method like this:

    in RouteConf: { path: '/path/:data', name: 'Defined_Path_Name', component: PathComponent }
    navigate with: this.router.navigate(['Defined_Path_Name', { data: { entity: 'entity' } } ]);

    in /path: console.log(this.routeParams.get('data'))
    that got me: Object {entity: "entity"}

//in your route file 

 in RouteConf: {path: 'calculator/:data', component: CalculatorComponent},

//in your component file navigate by like below

 navigate with: this.router.navigate(['/calculator', { data: this.loaddata } ]);

//and get data in  /calculator path like 

this.data =  this.route.snapshot.data['data'];

than console.log(this.data);

edited Jun 1, 2018 at 13:31

answered Jun 1, 2018 at 13:13

mittal bhatt

1,0097 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bhaumik shah Over a year ago

can you please explain your code and where i have to put this code

Akhil Aravind · Accepted Answer · 2018-06-01 12:50:57Z

0

Can you try using this, this should work, hope so

app.route.ts code

{path: 'calculator', component: CalculatorComponent},

and your code to route

 let someData = {
   this.loanData
 };
 this.router.navigate(['/home/calculator/'+someData]);

and the calculator.ts have the oninit method code is like this

import {ActivatedRoute} from '@angular/router';

    constructor(private route: ActivatedRoute) {}
    sub
    ngOnInit() {
        this.route.params
        .subscribe(data => {
         this.sub = data;
          console.log(this.sub);
});
    }

edited Jun 1, 2018 at 12:50

answered Jun 1, 2018 at 12:38

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

2 Comments

bhaumik shah Over a year ago

error means it's showing only [object,object] no any other value i am able to find

Akhil Aravind Over a year ago

check what is in "this.sub" first, may be you have value there, check the value first.

Collectives™ on Stack Overflow

Send JSON from one component to another using routing and not display on URL?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related