主菜單中的標簽菜單

Question

我想在標簽菜單中加載組件模板。

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

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

這是我的代碼。 它顯示兩個菜單聯系人和通話記錄。 當我點擊conatct菜單時，我想加載contactcomponent.html ，當點擊通話日志菜單時加載calllogscomponent.html 。 我該如何實現呢？

Answer 1

如果這是您的頂級菜單（或者您希望設置主頁面URL），請考慮使用路由器。 這將自動與路由器中設置的當前“頁面”同步：

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

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

創建模板引用變量#menuItems並在ts中使用它來對該模板進行修改。單擊另一個菜單，它會觸發activateMenu（）函數，它將新選擇的菜單設置為活動菜單。在html中使用* ngIf在兩個菜單之間切換與activeItem.label比較。

這適合我。

Answer 3

根據Primeng TabMenu的文檔，它們沒有給出這樣的功能你只能設置屬性默認情況下沒有一個回調函數

來源： - * https://www.primefaces.org/primeng/#/tabmenu

相反，你可以使用breadcrumb重定向頁面，你也可以提供URL，而不是根據你的需要用css設計面包屑的樣式

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

更新

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

您可以在那里使用它，您可以在菜單中調用回調函數和導航