Angular tabView primeNG routing

Question

我试图添加路由到我的tabView，但它不工作，任何建议为什么，请?我尝试添加routerLink="path到组件"但没有运气

这是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"])
},
},
];