Angular Passing Data Between Routes

Question

I have a little problem using routes in angular 4. You know, when I am trying to pass data from a component to another using navigate('root', data), I just received [object Object],[object Object],[object Object].

Component

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

Interface

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

Send Method

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);

I have found that passing an object via a route is not a friendly pattern, as a main point of having a route is so that a user can navigate directly there. If they navigate directly there, will the parent still be able to pass down the object? Usually not. — JWess, Jan 05 '21 at 16:45

score 86 · Answer 1 · edited Mar 26 '20 at 00:01

86

In the current version this is now available in @angular/router.

Angular 7.2 introduces route state to NavigationExtras, which takes an object literal similar to queryParams, etc.

The state can be set imperatively:

this.router.navigate(['example'], { 
  state: { example: 'data' } 
});

or declaratively:

<a routerLink="/example" [state]="{ example: 'data' }">
  Hello World
</a>

And read in a top-level component using:

this.router.getCurrentNavigation().extras.state;

or within child components using:

window.history.state

Added a working example of it being used on StackBlitz

edited Mar 26 '20 at 00:01

olfek

3,210
4
33
49

answered Feb 26 '19 at 06:11

mtpultz

17,267
22
122
201

navigate(commands: any[], extras?: NavigationExtras) `/example` should be sent as list right? – Chenna Feb 26 '19 at 16:30
Link: [Stackblitz](https://stackblitz.com/edit/angular-uapqsj) could you please check this is not working – Chenna Feb 26 '19 at 17:10
@Chenna you're right it was supposed to be a list. I thought initially you meant you couldn't have `/` at the start. I'll have a look at your example – mtpultz Feb 26 '19 at 17:41
4

I got it, it has to be mentioned in `constructor` – Chenna Feb 26 '19 at 17:45
2

Moving this line to the constructor works! this.name = this.router.getCurrentNavigation().extras.state.example; – maria Sep 28 '19 at 23:34
if you want to get this outside of constuctor (for example in ngOnInit) than use window.history.state – Koscik Feb 25 '20 at 09:13
3

Does anyone know why `this.router.getCurrentNavigation().extras.state` doesn't work in child components? – olfek Mar 26 '20 at 00:05
Is window.history.state working in child component? It is not working – Nasrul Bharathi Nov 06 '20 at 10:20

Suren Srapyan · Accepted Answer · 2019-03-02T10:20:29.130

24

When you pass an object as a route parameter, it causes to call toString on that object and you get the result [object Object] from the object.

const obj = {};
console.log(obj.toString());

If you want to pass complex type, you need to stringify it to a string and pass as a string. After when you get it, you need again to parse into an object.

this.route.navigate(['/requests/fill', JSON.stringify(data)]);

and access later

const key: Products = JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

edited Mar 02 '19 at 10:20

answered Apr 05 '18 at 05:29

Suren Srapyan

66,568
14
114
112

1

I think this is not an extensible way of doing things, having all this data in the URL , using to stringify and then parse... seem like not the proper way to solve this issue. – Pizzicato Feb 24 '21 at 09:46

score 4 · Answer 3 · answered Apr 05 '18 at 05:32

4

You can't pass list of data in params

So you need convert to string the list of objects then pass

navigate('root',   JSON.stringify(data))

Then do parsing while get this

const key: Products =JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

answered Apr 05 '18 at 05:32

Ramesh Rajendran

37,412
45
153
234

Angular Passing Data Between Routes

3 Answers3

Linked

Related