This specific code snippet is tailored for an Angular website.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component({
template: `
<p>Dashboard</p>
<p>Session ID: {{ sessionId | async }}</p>
`
})
export class AdminDashboardComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
//read query param
this.route
.queryParamMap
.map(params => console.log(params.get('thing')););
//read param value
this.route
.paramMap
.map((params: ParamMap) =>
console.log(params.get('id')));
}
}
If you want to learn more about routing in Angular, check out the documentation here.
Here's an example of how to implement navigation:
const appRoutes: Routes = [
{ path: 'do-something/:id', component: DoSomethingComponent, name: 'Details'}];
To navigate using the above configuration:
this.router.navigate( [
'Details', { id: 'idvalue', param1: 'value1'
}]);//this you can try from code
Ensure the URL matches like this:
do-something/idvalue?param1=value1. //try this from browser
To read query parameters, follow this approach:
ngOnInit() {
// Capture the access token and code
this.route
.queryParams
.subscribe(params => {
let thing = params['thing'];
});
}
Alternatively, you can use this method to retrieve query parameters:
(new URL(location)).searchParams.get("parameter_name")