0

I'm trying to send an object from one page to the rerouted page using angular. I have found similar topics around this which I have tried to reproduce but I still get undefined value. Although I seem to do it right according to this topics.

  goToOrderPage(){

 //code to create object

    let order = new Order("BTWNummer", "mail", this.totalPrice, this.sendCosts, orderlineset)

    console.log(
      "before send" + 
      order.btw + " - " + order.totalPrice + " - " + order.shippingcost + " - " + order.email
      );

      this.router.navigate(["/orderinfo"], { queryParams:  order });
  }

the object logs well and I have no error sending it. I get rerouted to the next page "/orderinfo":

export class OrderinfoComponent implements OnInit {
  order!:Order;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params=> {
      console.log(params);
      this.order = params['order'];
    
      console.log(
        this.order.btw + " - " + this.order.totalPrice + " - " + this.order.shippingcost + " - " + this.order.email
        );
    })
  }

}

Here do get an undefined value whilst logging the code. The console.log giving the queryparam does clearly log {order: Object object} I tried some other things to besides the code written down here, but I cannot get the value parsed. How do I properly parse to param value in the order object?

Yannick Mussche
  • 316
  • 2
  • 12

1 Answers1

1

You cannot just pass an entire object as a query parameter. You need to encode it somehow, because query string parameters are represented as... strings. You can either send every order property as a separate query string parameter, or look into other, more ergonomic ways of achieving the desired result. For example you can use navigation extras state

this.router.navigate(["/orderinfo"], { state: order });

Then in your OrderinfoComponent you can access it before the navigation ends (usually in the component's constructor) like this:

this.order = router.getCurrentNavigation()?.extras.state as Order;

It is accessible also after the navigation ends by using history.state.

You can also include a service for holding the state that you want to share between certain components.

Octavian Mărculescu
  • 4,312
  • 1
  • 16
  • 29
  • Is router still a part from ActivatedRoute? I get an error on it. – Yannick Mussche Sep 13 '22 at 13:13
  • No, it's the `router: Router` the, actual Router. – Octavian Mărculescu Sep 13 '22 at 13:14
  • I cannot get the code to compile. Or router gives error, unless I make it this.router, but than order gets error Type 'undefined' is not assignable to type 'Order' – Yannick Mussche Sep 13 '22 at 13:21
  • I mentioned in the answer that the `router.getCurrentNavigation` thing should happen inside the constructor. It should work without `this` there. Make sure this is written in the constructor. The `undefined` error is just a compiler error and I added a *fix* for it in the answer, please refresh the page. – Octavian Mărculescu Sep 13 '22 at 13:26