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

Question

我有一个项目列表，我希望允许用户单击该项目并在其下方显示更多信息。为了做到这一点，我在每个项目组件中放置了一个路由器插座，并将相关路径分配给路由模块。但是，当单击时，它不会在单击的组件中呈现信息，而是将信息放在最后一个项目组件的路由器插座中。有没有办法只在点击的组件内呈现数据？

路由模块：

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>

这是我想要的功能的图示：

Answer 1

虽然我不建议在内部组件仅在点击时显示时使用路由来实现它，但您可以使用以下方法完成它：

链接界面

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

组件

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

public activeLink: Link;

模板

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

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

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