How to access query params from a url using activated router in angular?

Question

I need to access the current url with query params using an activate router.

 constructor(private router: Router,
              private route: ActivatedRoute) {
  }

 ngOnInit() {
    this.router.events.pipe(
          filter((event: RouterEvent) => event instanceof NavigationEnd && event.url.startsWith('/resources'))
        ).subscribe(() => {
          console.log(this.route.snapshot.params)
        })

}

When I access my url, http://localhost:4200/web/#/resources/sharepoint;siteId=docs;displayName=test;resourceId=4

this.route.snapshot.params

prints an empty array. How can I access the query param "resourceId"?

I have tried this.route.snapshot.queryParams and still it prints an empty array.

Answer 1

read with this.router.url then split it

constructor(private router: Router) {
   var url=this.router.url;
    var params=url.split(";");
    var resourceId=params[params.length-1].split("=")[1];
}

Answer 2

There has been a handy API add on to the old ActivatedRoute class. The queryParamMap() utility gets directly to the route query parameters, and provides a Map object to interact with.

It can be used as in the following example, with some variations:

Component({template: `{{resourceId$ | async}}`, selector: 'some-cmp'})
export class SomeCmpComponent{
resourceId$: Observable<string>; 
constructor(private route: ActivatedRoute) {}

 ngOnInit() {
    this.resourceId$ = this.route.queryParamMap.pipe(
     map((params: ParamMap) => params.get('resourceId'))
    );
 }
}

I hope this helps.