There is a workaround using secondary routes as Angular will persist these across primary route navigation.
First, add a named router outlet in your top component:
<router-outlet name="params"><router-outlet>
Next, create a dummy component to route to:
@Component({
template: ""
})
export class ParamsComponent {}
and define a route to instantiate this component into the named outlet:
{
path: ':val1',
component: ParamsComponent,
outlet: "params"
}
Change you app navigation to:
https://my.application.com/(params:val1)
If you look at any ActivatedRoute, you can find the "params" route using:
var paramsRoute = this.activatedRoute.route.children.find(r => r.outlet == "params");
If paramsRoute is null, the url doesn't contain the (params:val1).
This next part gets a bit "hacky" as the secondary route is instantiated after the primary route on initial load. Because of this, until your app is fully loaded, you may find paramsRoute.snapshot to be null. There is a private property "_futureSnapshot" which will contain the route params on initial startup...and persists through the life of the app. You can get to these by using:
var queryParams =
paramsRoute
? paramsRoute["_futureSnapshot"].params
: {};
var val1 = queryParams["val1"];
Given that _futureSnapshot is not part of the public API, this is probably a field we're not supposed to use. If you feel icky using it, you could probably subscribe to paramsRoute.params, but this will probably complicate your components.
if (paramsRoute) {
paramsRoute.params.subscribe(params => {
this.queryParams = params;
this.loadData();
});
} else {
this.queryParams = {};
this.loadData();
}
========= AMENDMENT =============
I found an even better way to pull the query parameters which is definitely NOT icky... In a component or service which is instantiated before routing occurs, add the following logic:
const routeRecognizedSubscription = this.router.events
.filter(e => e instanceof RoutesRecognized)
.subscribe((e: RoutesRecognized) => {
const paramsRoute = e.state.root.children.find(r => r.outlet == "params");
if (paramsRoute) {
// capture or use paramsRoute.params
}
routeRecognizedSubscription.unsubscribe();
});
This code temporarily subscribes to RoutesRecognized events which occur before navigation. After it receives the first event, it will automatically unsubscribe as we only need to do this when the app starts.
On the first event, we look for the state corresponding to "params" outlet. If found, the params property will contain the data we need. No need to access private properties.