Get values from URL in Angular-CodePudding

I have a component named reset-password-modal. I need to use this component when a user gets a link to reset a password. In the link, there are details regarding the user, username, mail, and a token. I need to display the username, email on UI, from the given link. The format of the link is like this: http://localhost:4200/#/[email protected]&userName=YourName&token=iAMyourTOKEN.

I referred to many of the StackOverflow answers regarding how to use Angular's ActivatedRoute. But was not able to get the desired output.

Some of the ways which I tried.

import { ActivatedRoute } from '@angular/router'

constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
const email = String(this.activateRoute.snapshot.paramMap.get('email'))
    console.log(email);
}

Every time I am receiving a null value in return.

Another way which I tried was using queryParamMap but was not able to retrieve the needed information. I have also tried subscription to the params but didn't help. Any help is appreciated. Thank you.

CodePudding user response：

It's not possible to get queryParams with paramMap method, read this:

paramMap: An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

It's an observable and you need to subscribe to this if you want to get some required parameters from URL.

example:

this.route.paramMap.subscribe((obs) => {
      console.log(obs.get('id'));
    });

But you need to specife this in your Routes:

{ path: ':id', component: ContactIdComponent }

To get query params from your URL use this:

 this.route.queryParams.subscribe((query: Params) => {
      console.log(query);
    });

CodePudding user response：

please try it

import { ActivatedRoute } from '@angular/router'

email: string;

constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
this.route.queryParams
      .subscribe(params => {
        console.log(params); 
        this.email= params.email;
        console.log(this.email); 
      }
    );
}

guide: here

CodePudding user response：

You can try this out :

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

email: string;
constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
this.getParams();
}
getParams(){
this.activatedRoute.queryParams.subscribe(params => {
  if(params){   
    this.email = params?.email;
 }
})
}