Retrieve hash fragment from url with Angular2
To expand on the current answers, I wanted to address an easy way to parse the query params in the hash (specifically for a federated response) since the ActivatedRoute
doesn't seem to handle that natively.
this.route.fragment.subscribe(fragment => {
const response = _.fromPairs(Array.from(new URLSearchParams(fragment)));
response.access_token;
response.id_token;
response.expires_in;
response.token_type;
});
First create a new URLSearchParams object with the fragment to query for its values:
new URLSearchParams(fragment).get('access_token');
For most cases this is probably all that is needed, but if converting this to an object is desired, Array.from
converts URLSearchParams
into an array of arrays that looks like: [['key', 'value'], ...]
. Then lodash's _.fromPairs
converts this to an object.
For those still looking :
import { ActivatedRoute } from '@angular/router';
export class MyComponent {
constructor(
private route: ActivatedRoute,
) { }
myfunction(){
this.route.fragment.subscribe((fragment: string) => {
console.log("My hash fragment is here => ", fragment)
})
}
}
you can also use ActivatedRouteSnapshot with no need to subscribe for all changes on it.
@Component({templateUrl:'./my-component.html'})
class MyComponent {
constructor(route: ActivatedRoute) {
const fragment: string = route.snapshot.fragment;
}
}