Using router-outlet within a loop in angular

Question

I am facing a very tricky situation. I have defined multiple routes that are mapped to different components in my application. I want to load the component corresponding to given route in <router-outlet> which should not be a problem in usual scenarios. But this time I want to use the <router-outlet> within a custom made list component just like code given below. This creates multiple instances of <router-outlet> which causes problems and the component does not load.

<list*ngFor="let cat of settings">
  <list-item *ngFor="let item of cat.items" 
      [routerLink]="cat.route + item.route" queryParamsHandling="merge">
    <router-outlet></router-outlet>
  </list-item>
</list>

The code below just works fine. But the component is loaded outside list component. Which is not desired.

<list*ngFor="let cat of settings">
  <list-item *ngFor="let item of cat.items" 
     [routerLink]="cat.route + item.route" queryParamsHandling="merge">
  </list-item>
</list>
<router-outlet></router-outlet>

The code below also works fine. But this time I lose the ability to dynamically load component based on route. Same component is loaded for all.

<list*ngFor="let cat of settings">
  <list-item *ngFor="let item of cat.items" 
     [routerLink]="cat.route + item.route" queryParamsHandling="merge">
    <custom-component></custom-component>
  </list-item>
</list>

Or is there simply a way to figure out the component dynamically based on route and inject in the template.