angular - Flikmeny i prime ng

Jag vill ladda en komponentmall vid klick på flikmenyn.

<p-tabMenu class="ui-tabmenu" [model]="items"></p-tabMenu>

this.items = [
    {label: 'Contacts', icon: 'fa-bar-chart'},
    {label: 'Call Logs', icon: 'fa-calendar'} 
];

Detta är min kod. Den visar två menykontakter och samtalsloggar. När jag klickar på kontaktmenyn vill jag ladda contactcomponent.html och när jag klickar på samtalsloggar-menyn laddas calllogscomponent.html. Hur kan jag implementera detta?

Svar #1

Om detta är din översta meny (eller om du vill att huvudsidans URL ska ställas in) bör du överväga att använda routern. Detta kommer automatiskt att synkronisera med den aktuella 'sidan' som är inställd i routern:

https://www.primefaces.org/primeng/#/menumodel

export class MenuDemo implements OnInit {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'fa-plus', url: 'http://www.primefaces.org/primeng'},
                {label: 'Open', icon: 'fa-download', routerLink: ['/pagename']}
            ]
        }];
    }
}

Svar #2

<p-tabMenu #menuItems [model]="items" [activeItem]="activeItem" (click)="activateMenu()"></p-tabMenu>

items:MenuItem[];
activeItem: MenuItem;
@ViewChild('menuItems') menu: MenuItem[];

this.items = [
    {label: 'Contacts', icon: 'fa-bar-chart'},
    {label: 'Call Logs', icon: 'fa-calendar'} 
];
this.activeItem = this.items[0];

activateMenu(){
   this.activeItem =this.menu['activeItem'];
}

Skapa en referensvariabel för mall #menuItems och använd den i ts för att göra ändringar på den mallen. Vid klick på en annan meny utlöses activateMenu()-funktionen där den nya valda menyn sätts som aktiv. I html växla mellan två menyer med *ngIf genom att jämföra med activeItem.label.

Det fungerar för mig.

Relaterade artiklar