Skip to content

Feature Request: Global Route Parameter and Data Injection Utilities #557

@Schmitda

Description

@Schmitda

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions