主菜单中的标签菜单

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

您可以在那里使用它，您也可以在菜单中调用回调函数和导航