Is there a way to insert an ngx breadcrumb dynamically without making a module a child module of some parent?

We have a sports booking website where I'd like to be the breadcrumbs as follows:

:home/:sport/:city/:court

:home, :sport and :/city are all routed to HomeComponent. But when a :court is supplied, the user should be routed to CourtComponent, as you can see in the snippet below:

const routes: Routes = [
  
  {
    path: ':city',
    component: HomeComponent,
  },
  {
    path: ':city/:court',
    component: CourtComponent,
  },
  { path: '', component: HomeComponent },
];

This however causes the :city/:court path to be treated as a single url, meaning that the user can't click on the :city and be routed to :home/:sport/:city.

I know I can make CourtComponent a child of HomeComponent, but adding an extra router-outlet and hiding HomeComponent when CourtComponent is activated seems overcomplicated.

Is there a simpler way to insert a separate :city breadcrumb before the :court breadcrumb?

Any advice would be greatly appreciated!