Angular tabView primeNG 路由

Question

我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气

这是html

<p-tabView>
  <p-tabPanel header="Weather Data" routerLink="/weather-data">
     <app-weather-data></app-weather-data>
  </p-tabPanel>
  <p-tabPanel header="Chart">
      <app-chart></app-chart>
  </p-tabPanel>
  <p-tabPanel header="Heat index calculator" closable="true">
      <app-heat-index></app-heat-index>
  </p-tabPanel>
</p-tabView>

这是 module.ts

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'weather-data', component: WeatherDataComponent },
  { path: 'chart', component: ChartComponent },
  { path: 'heat-index', component: HeatIndexComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    WeatherDataComponent,
    ChartComponent,
    HeatIndexComponent,
  ],
  imports: [
    BrowserModule,
    TabViewModule,
    ButtonModule,
    ChartModule,
    TableModule,
    HttpClientModule,
    InputNumberModule,
    FormsModule,
    SelectButtonModule,
    DropdownModule,
    BrowserAnimationsModule,
    FontAwesomeModule,
    InputSwitchModule,
    PaginatorModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助

Answer 1

我按以下方式使用了 TabMenu 组件。

<p-tabMenu [model]="items"> </p-tabMenu>
<router-outlet></router-outlet>

MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。

  this.items = [
  {
    label: "Map",
    icon: "pi pi-fw pi-map",
    command: () => {
      this.router.navigate(["./map"])
    },
  },
];