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
– JWess, Commented Jan 5, 2021 at 16:45

olfek · Accepted Answer · 2020-03-26 00:01:14Z

87

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, 2020 at 0:01

olfek

3,5224 gold badges38 silver badges56 bronze badges

answered Feb 26, 2019 at 6:11

mtpultz

18.5k24 gold badges128 silver badges211 bronze badges

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

9 Comments

Chenna Over a year ago

navigate(commands: any[], extras?: NavigationExtras) /example should be sent as list right?

Chenna Over a year ago

Link: Stackblitz could you please check this is not working

Chenna Over a year ago

I got it, it has to be mentioned in constructor

maria Over a year ago

Moving this line to the constructor works! this.name = this.router.getCurrentNavigation().extras.state.example;

olfek Over a year ago

Does anyone know why this.router.getCurrentNavigation().extras.state doesn't work in child components?

|

Suren Srapyan · Accepted Answer · 2019-03-02 10:20:29Z

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 2, 2019 at 10:20

answered Apr 5, 2018 at 5:29

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

1 Comment

Pizzicato Over a year ago

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.

Ramesh Rajendran · Accepted Answer · 2018-04-05 05:32:06Z

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 5, 2018 at 5:32

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Collectives™ on Stack Overflow

Angular Passing Data Between Routes

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related