Menu
For example this router
{
path: '/client',
component: ClientRootComponent,
children: [
{path: '', component: ClientListComponent},
{path: ':clientId', component: ClientOpenComponent, resolve: makeResolver(ClientOpenResolver)}
]
},
{
path: '**',
component: NotFoundComponent
}
will pass both URLs /client/1234 and /client/asdf to ClientOpenComponent. How I can make that /client/asdf will be matched as NotFound and passed to NotFoundComponent?
490
Angular Route Params: How to Pass Route Params in Angular. To access route parameters and query parameters in Angular, use ActivatedRoute service. The ActivatedRoute service provides Observables through which we can subscribe to the values of route params and route query params. In Angular, we can pass the data as route parameters in two ways.
In Angular, we can pass the data as route parameters in two ways. Route params(Route parameters) Route queryParams(Route query parameters) If we want to pass values between views, then we can use route params. For example, if we’re going to pass an ID from one route to another and fetch the id on a component onInit(), then we can use route params.
Query parameters in Angular allow for passing optional parameters across any route in the application. Query parameters are different from regular route parameters, which are only available on one route and are not optional (e.g., /product/:id ). In this article, you will reference an example of an application that displays a list of products.
The Angular adds the map all the route parameters in the ParamMap object, which can be accessed from the ActivatedRoute service The ParamMap makes it easier to work with parameters.
You can pass a custom matcher to your route
import { defaultUrlMatcher } from '@angular/router/src/shared';
function digitsMatcher(segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route): UrlMatchResult | null {
const result = defaultUrlMatcher(segments, segmentGroup, route);
if (!result || !result.consumed || result.consumed.length < 1) {
return;
}
const re = /^\d+$/;
const match = re.exec(result.consumed[0].path);
if (match) {
return result;
}
return null;
}
{
path: '/client',
component: ClientRootComponent,
children: [
{path: '', component: ClientListComponent},
{path: ':clientId', component: ClientOpenComponent, resolve: makeResolver(ClientOpenResolver), matcher: digitsMatcher}
]
},
{
path: '**',
component: NotFoundComponent
}
The code is not tested
See also
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
