在单击的组件的路由器插座中渲染路由

Question

I have a list of items and I would like to allow the user to click on the item and display more information below it. In order to do this I put a router outlet within each item component and assigned the relevant path to the routing module. When clicked, however, instead of rendering the information in the clicked component it places the information in the last item component's router-outlet. Is there a way to render the data only within the clicked component?

routing module:

path: 'items', component: ItemListComponent,
  children:[
    {
      path: 'detail/:item_id', component: ItemDetailComponent 
    }

itemDetailComponent.html

<a [routerLink]="['detail', item.id]">{{item.name}}</a>

<router-outlet></router-outlet>

Here is an illustration of the functionality I want:

Answer 1

Although I wouldn't recommend implementing it using routing when inner component is only shown on click, you can have it done using the following approach:

Link interface

interface Link {
  path: [string, number];
  label: string;
}

Component

public links: Link[] = [
  {
    label: 'route 1',
    path: ["detail", 1],
  },
  {
    label: 'route 2',
    path: ["detail", 2],
  },
]

public activeLink: Link;

Template

<div *ngFor="let link of links" (click)="activeLink = link">

  <a [routerLink]="link.path">{{link.label}}</a>

  <router-outlet *ngIf="link == activeLink"></router-outlet>
  
</div>