Nebular nb-route-tabset点击跳转及内容不显示问题求助

你的问题核心是路由配置结构错误加上父组件缺少路由出口，导致子组件无法在标签页内部渲染，而是直接跳转到独立页面。以下是具体解决步骤：

1. 修改路由为子路由结构 #

将参数、规则、转换器的路由设置为ConversionOverviewComponent的子路由，确保它们在父组件内部渲染，而非替换父组件：

const routes: Routes = [
  {
    path: "",
    component: ConversionOverviewComponent,
    // 添加children字段，包含所有子标签对应的路由
    children: [
      {
        path: "parameters",
        component: ConversionConfigurationEditComponent,
      },
      {
        path: "rules",
        component: ConversionRulesListComponent,
      },
      {
        path: "converters",
        component: ConvertersListComponent,
      },
      // 可选：设置默认子路由，进入父组件时自动显示第一个标签内容
      {
        path: "",
        redirectTo: "parameters",
        pathMatch: "full"
      }
    ]
  },
];

2. 在父组件模板中添加<router-outlet> #

nb-route-tabset需要父组件内的路由出口来承载子组件内容，修改模板代码：

<nb-card>
  <nb-card-body>
    <nb-route-tabset *ngIf="tabs" [tabs]="tabs" fullWidth></nb-route-tabset>
    <!-- 新增路由出口，子组件将在此处渲染 -->
    <router-outlet></router-outlet>
  </nb-card-body>
</nb-card>

3. 简化tabs的路由路径（可选） #

可以将tabs中的route路径简化为不带./的形式，功能不受影响：

tabs: NbRouteTab[] = [
  {
    title: "Parameters",
    route: "parameters",
  },
  {
    title: "Rules",
    route: "rules",
  },
  {
    title: "Converters",
    route: "converters",
  },
];

原理说明 #

原路由是同级结构，点击标签时会触发完整页面导航，直接替换掉ConversionOverviewComponent。改成子路由后，导航只会更新父组件内的<router-outlet>区域，同时nb-route-tabset会自动匹配当前路由激活对应标签，实现标签页内部切换内容的效果。

内容的提问来源于stack exchange，提问作者SeyoS