Как настроить активную вкладку в PrimeNG tabMenu?

Question

Где я объявляю 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} }); }
        }
    ];

Как настроить активную вкладку, чтобы каждый пункт меню активировал соответствующую вкладку?

Answer 1

Документация

Задавать [activeItem] собственность на tabMenu,

пример

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>

Answer 2

Вы пытались использовать « routerLink: » вместо « command: () => »?

Нет необходимости назначать [activeItem] вообще, так как это должно быть сделано автоматически через маршрутизацию. Но все же вы можете назначить его вручную следующим образом:

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

Ссылаясь на этот очень простой пример в stackblitz , вы можете видеть, что при использовании опции «command:()=>» это не повлияет на изменение активной вкладки (например, при перезагрузке страницы или вводе URL-адреса вручную ни одна вкладка не будет изменена ). быть избранным). С другой стороны, опция «routerLink:» прекрасно работает.

Вы также можете сослаться на этот пост на форуме Primefaces