更新

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

string json = Json(JsonConvert.SerializeObject(symboltable2), JsonRequestBehavior.AllowGet);;
json = json.Remove(json.Substring(0, 1));
json = json.Remove(json.Substring(json.Length - 1, 1));
return json;

创建模板参考变量 #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

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

主菜单中的标签菜单

3 个答案:

更新