如何实现点击Ignite UI标签后在标签下方显示路由组件而非跳转新页面

嘿，我来帮你捋捋这个问题！你已经找对了核心方向——用router-outlet在标签页内容区加载组件，只是路由结构和导航方式需要调整一下，具体步骤如下：

1. 重构路由结构，让目标路由成为父页面的子路由 #

你现在的detail/:id/projectsor/:libraryId是独立路由，Angular会默认把它当成新页面跳转。我们需要把它改成detail/:id的子路由，这样它就会加载在ProjectDetailComponent（也就是包含你标签页的那个组件）内部的router-outlet里。

修改你的路由配置：

const routes: Routes = [
  { path: 'detail', component: ProjectDetailComponent},
  { 
    path: 'detail/:id', 
    component: ProjectDetailComponent,
    // 把projectsor相关路由放到这里作为子路由
    children: [
      { 
        path: 'projectsor/:libraryId', 
        component: LibraryDetailComponent,
        children: [
          {path: '', component: LibrarySetupComponent},
          {path: 'disciplines', component: DisciplineListComponent},
          {path: 'jointdisciplines', component: JointDisciplineListComponent},
          {path: 'materials', component: MaterialListComponent},
          {path: 'weights', component: WeightItemListComponent},
          {path: 'schedules/:disciplineId', component: ScheduleListComponent},
          {path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
          {path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent},
        ]
      }
    ]
  },
  { path: '', component: ProjectListComponent }
];

2. 调整标签页的导航方式 #

现在你不需要让标签页跳转到新页面，而是要触发相对路由导航，让内容加载到当前页面的标签内容区里。有两种简单的实现方式：

方式一：用routerLink相对路径（推荐） #

直接给igx-tab-header绑定相对路径的routerLink，同时加上routerLinkActive来标记激活的标签：

<igx-tab-item>
  <igx-tab-header 
    [routerLink]="['projectsor', libraryId]"
    routerLinkActive="igx-tab-header--active"
  >
    <span igxTabHeaderLabel>View Project SOR</span>
  </igx-tab-header>
  <igx-tab-content>
    <router-outlet></router-outlet>
  </igx-tab-content>
</igx-tab-item>

这里的['projectsor', libraryId]是相对当前路由detail/:id的路径，Angular会自动拼接成detail/:id/projectsor/:libraryId，内容就会加载到标签里的router-outlet中。

方式二：手动触发路由导航 #

如果需要在导航前做一些逻辑处理，可以在组件类里用Router手动导航：
首先在模板里绑定点击事件：

<igx-tab-item>
  <igx-tab-header (click)="navigateToProjectSOR()">
    <span igxTabHeaderLabel>View Project SOR</span>
  </igx-tab-header>
  <igx-tab-content>
    <router-outlet></router-outlet>
  </igx-tab-content>
</igx-tab-item>

然后在组件类（比如ProjectDetailComponent）里注入Router和ActivatedRoute，实现导航方法：

import { Router, ActivatedRoute } from '@angular/router';

// 组件类里注入依赖
constructor(private router: Router, private route: ActivatedRoute) {}

// 导航到Project SOR页面
navigateToProjectSOR() {
  // 用relativeTo指定相对当前路由导航
  this.router.navigate(['projectsor', this.libraryId], { relativeTo: this.route });
}

3. 确保LibraryDetailComponent内部有子路由出口 #

因为你给LibraryDetailComponent配置了子路由（比如disciplines、materials），所以需要在LibraryDetailComponent的模板里添加一个router-outlet，用来加载这些子组件：

<!-- LibraryDetailComponent的模板 -->
<div class="library-detail-container">
  <!-- 这里可以放LibraryDetailComponent的自身内容 -->
  <router-outlet></router-outlet>
</div>

这样调整后，点击标签页就不会跳转新页面，而是在标签下方的router-outlet里加载LibraryDetailComponent及其子组件内容啦！

备注：内容来源于stack exchange，提问作者lross33