如何在 PrimeNG tabMenu 中设置活动选项卡？

Posted 2023-03-16

【中文标题】如何在 PrimeNG tabMenu 中设置活动选项卡？

【英文标题】：How do i set the active tab in PrimeNG tabMenu?

【发布时间】：2017-09-16 10:18:04

【问题描述】：

我在哪里声明 activeIndex 以及如何使用这个变量？

我有 html文件：

<p-tabMenu [model]="tabMenuItems"></p-tabMenu>

和打字稿文件：

tabMenuItems: MenuItem[];
private stateId: number;
private id: number;
...
ngOnInit() 
   this.tabMenuItems = [
        label: 'Bar1', icon: 'ui-icon-insert-chart',
            command: (event: any) => 
                this.router.navigate(['/#', 
             this.id], queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar2', icon: 'ui-icon-date-range',
            command: (event: any) => 
                this.router.navigate(['/#', this.id], queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar3', icon: 'ui-icon-book',
            command: (event: any) => 
                this.router.navigate(['/#', this.id],
                     queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar4', icon: 'ui-icon-help-outline',
            command: (event: any) => 
                this.router.navigate(['/#', this.id],
                     queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar5', icon: 'ui-icon-public',
            command: (event: any) => 
                this.router.navigate(['/#', this.id],
                     queryParams: 'stateId': this.stateId ); 
        
    ];

如何设置活动标签，让每个菜单项激活相应的标签？

【问题讨论】：

add [activeItem]="activeItem" => activeItem 是你在组件中选择的对象

你也有这个：routerLinkActiveOptions: ' exact: true '

【参考方案1】：

Documentation

在tabMenu 上设置[activeItem] 属性。

例子

ngOnInit() 
   this.tabMenuItems = [
        label: 'Bar1', icon: 'ui-icon-insert-chart',
            command: (event: any) => 
                this.router.navigate(['/#', 
             this.id], queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar2', icon: 'ui-icon-date-range',
            command: (event: any) => 
                this.router.navigate(['/#', this.id], queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar3', icon: 'ui-icon-book',
            command: (event: any) => 
                this.router.navigate(['/#', this.id],
                     queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar4', icon: 'ui-icon-help-outline',
            command: (event: any) => 
                this.router.navigate(['/#', this.id],
                     queryParams: 'stateId': this.stateId ); 
        ,
        label: 'Bar5', icon: 'ui-icon-public',
            command: (event: any) => 
                this.router.navigate(['/#', this.id],
                     queryParams: 'stateId': this.stateId ); 
        
    ];

    this.activeTab = this.tabMenuItems[1];

在 HTML 中

<p-tabMenu [model]="tabMenuItems" [activeItem]='activeTab'></p-tabMenu>