正在准备中的选项卡菜单

Posted 2023-03-13

技术标签:

【中文标题】正在准备中的选项卡菜单【英文标题】：Tab Menu in prime ng 【发布时间】：2017-08-15 13:18:00 【问题描述】：

我想在标签菜单点击加载一个组件模板。

<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。我该如何实现？

【问题讨论】：

同样的问题。 PrimeNG 的医生很穷。它讲述了如何制作标签本身，但没有说明如何显示内容或在不同模板之间切换。我目前整天都在试图弄清楚如何使用 PrimeNG 组件。 【参考方案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']
            ]
        ];

【讨论】：

【参考方案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 比较两个菜单之间的切换。

这对我有用。

【讨论】：

【参考方案3】：

根据 Primeng TabMenu 的文档，他们没有提供这样的功能，您只能设置属性，默认情况下没有单个回调函数

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

您可以使用breadcrumb 来重定向页面，在那里您也可以提供 URL，而不是根据您的需要使用 css 样式化面包屑

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