Comment définir l'onglet actif dans l'onglet PrimeNGMenu?

Question

Où puis-je déclarer activeIndex et comment utiliser cette variable?

je fichier html:

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

et le fichier tapuscrit:

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} }); } 
     } 
    ]; 

Comment définir l'onglet actif, de sorte que chaque élément de menu activer l'onglet correspondant?

Answer 1

Documentation

Set [activeItem] propriété sur le tabMenu.

Exemple

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]; 
} 

En HTML

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