-
-
Notifications
You must be signed in to change notification settings - Fork 102
Description
I'd like to propose two new injection utilities that help with accessing route parameters and data across nested routes:
injectGlobalRouteParam and injectGlobalRouteData
injectGlobalRouteParam
Works with URL parameters (:paramName in route paths)
Gets values from route.paramMap
Values are always strings initially (can be transformed)
injectGlobalRouteData
Works with static route data AND resolved data
Gets values from route.data
Values can be of any type
Basic Usage
@Component({
template: `
<div *ngIf="projectSlug()">
Current Project: {{projectSlug()}}
</div>
<div *ngIf="pageConfig()">
Page Type: {{pageConfig()?.type}}
</div>
`
})
export class ProjectComponent {
// Access route parameter from any depth
projectSlug = injectGlobalRouteParam('projectSlug');
// With type transformation
pageId = injectGlobalRouteParam('id', {
transform: (value) => parseInt(value, 10)
});
// Access route data
pageConfig = injectGlobalRouteData<{type: string}>('config');
}
const routes: Routes = [
{
path: 'project/:projectSlug',
component: ProjectLayoutComponent,
data: { config: { type: 'project' } },
children: [
{
path: 'page/:pageId',
component: PageComponent,
data: { config: { type: 'detail' } }
}
]
}
];Advantages of injectGlobalRouteParam over injectParams():
Deep Route Parameter Access
Recursively searches through all child routes to find parameters
Useful in complex route hierarchies where parameters might be defined at different levels
// Works even in deeply nested child components
const projectSlug = injectGlobalRouteParam('projectSlug');
Personal Experiance
We had the need for such a directive in a BreadCrumbComponent which is not at the same level as the childElements.
With injectParams() we were not able to receive those elements.
Differentiation
If interested we might also make a Pull - Request where we could adjust the currently existing injectParams() and add an option which allows the user to specify if all params should be accessed.
injectParams('...', {global: true})
Offer
I am writing this feature request not because I am not able to create this. In fact it already exists. My question would be. Is this something which might suite ngextension? I would like to have as little as possible code which isn't 'standardCode' in terms of available to the Angular Community for improvement.
If the authors of this open source project are interested let me know and I will work on a pull - request.