How pass parameters from urlA to urlB without show them in the url

Question

I need to pass parameters from URLA o urlB whithout and the urlB must be show ( so I can't use skiplocation=true).

in my ts I do ( in URLA) :

 this.router.navigate([URLB], {
                queryParams:
                {
                    name: "erika"

                }
            });

and when I take the parameter I do:

 this.activatedRoute.queryParams.subscribe(params => {
      this.name = params['name'];

    });

The proble is that it shows me url in this way URLB?name=erika and I don't want to do this, but i want the it show me URLB and I can take parameters. Anyone can help me?

If you are sending queryparams programmatically, Why you dont use service/input instead of using queryParams. If you use service you can store that data in service and fetch it from any of the component. or you can use event emitters to send data to a particular component. — Sanket wani, Apr 29 '20 at 14:39
`Service` is a best option to do that . You can use `localstorage` also. — uiTeam324, Apr 29 '20 at 14:40

score 1 · Accepted Answer · answered Apr 29 '20 at 14:41

1

Use this:

let data = {name: 'erika'}
this.router.navigateByUrl([URLB], data);

and this:

this.activatedRoute.data
  .subscribe(
    (data: Data) => {
      this.name = data['name'];
    }
  );

answered Apr 29 '20 at 14:41

hpopiolkiewicz

3,281
4
24
36

I'm tring to use your solution and when I so this this.router.navigateByUrl('/urlB',data). The compiler it gives me this error "data has no properties in common with type 'NavigationExtras'" – poopp Apr 29 '20 at 15:33
a good explain, in: https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb – Eliseo Apr 29 '20 at 16:31

score 0 · Answer 2 · answered Apr 29 '20 at 14:42

You have multiple ways to achieve that.

1) Share data through @Input and @Output

2) Sharing data through a service: https://angular.io/guide/component-interaction#parent-listens-for-child-event

3) Sharing data through State libraries. I recommend you Ngxs

score -1 · Answer 3 · answered Apr 29 '20 at 14:36

-1

You can use @Input to pass data from one component to another without the need to see this data reflected in the url

More information https://angular.io/guide/component-interaction

answered Apr 29 '20 at 14:36

Juance

36
1
1
7

How pass parameters from urlA to urlB without show them in the url

3 Answers3