Parent components gets empty Params from ActivatedRoute
If you'd like to access the router parameters via a service, this approach will not work! consider using a service to prevent the replication of the "Route params value extraction logic" (from this Medium article):
@Injectable({
providedIn: 'root'
})
export class MyParamsAwareService {
constructor(private router: Router) {
this.router.events
.pipe(
filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0)),
map(e => e instanceof ActivationEnd ? e.snapshot.params : {})
)
.subscribe(params => {
console.log(params);
// Do whatever you want here!!!!
});
}
}
ActivatedRoute
: Contains the information about a route associated with a component loaded in an router outlet. If you would like to access route details outside of it, use the code below.
import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';
export class AppComponent {
constructor(private route: ActivatedRoute, private router: Router) {
}
ngOnInit(): void {
this.router.events.subscribe(val => {
if (val instanceof RoutesRecognized) {
console.log(val.state.root.firstChild.params);
}
});
}
}
There are other ways to share data in between components for example by using a service.
For more details about how you can tackle this as concept, read comments here.
The Very simple answer
import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';
export class AppComponent {
constructor(private actRoute: ActivatedRoute, private router: Router){}
ngOnInit(): void {
this.actRoute.firstChild.params.subscribe(
(params: any) => {
if (params.hasOwnProperty('<whatever the param name>') != '') {
//do whatever you want
console.log(params.<whatever the param name>);
}
});
}
}
ActivatedRoute
works for components loaded via router-outlet
. From docs - it:
Contains the information about a route associated with a component loaded in an outlet.
I don't think you can use it in components that are not loaded in an outlet. It also doesn't work in base classes your component extends.
class A { constructor(public route: ActivatedRoute) }
class B extends A { ngOnInit() { this.route; } } // not working
class C { constructor(public route: ActivatedRoute) } // working if loaded in outlet