typescript 主要 ng 中的选项卡菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42968367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tab Menu in prime ng
提问by Basil Joy
I want to load a component template in tab menu click.
我想在选项卡菜单单击中加载组件模板。
<p-tabMenu class="ui-tabmenu" [model]="items"></p-tabMenu>
this.items = [
{label: 'Contacts', icon: 'fa-bar-chart'},
{label: 'Call Logs', icon: 'fa-calendar'}
];
This is my code. It shows two menu contacts and call logs. when I click on conatct menu I want to load contactcomponent.htmland when click on call logs menu load calllogscomponent.html. How can I implement this?
这是我的代码。它显示了两个菜单联系人和通话记录。当我点击 conatct 菜单时我想加载contactcomponent.html，当点击 call logs 菜单加载时calllogscomponent.html。我该如何实施？
回答by Simon_Weaver
If this is your top-level menu (or you want the main page URL to be set) then consider using the router. This will automatically sync with the current 'page' set in the router:
如果这是您的顶级菜单（或者您希望设置主页 URL），请考虑使用路由器。这将自动与路由器中设置的当前“页面”同步：
https://www.primefaces.org/primeng/#/menumodel
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']}
]
}];
}
}
回答by Jeevana
<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'];
}
Create template reference variable #menuItemsand use it in ts to do modifications on that template.On click of another menu it triggers activateMenu()function where it sets the new selected menu as an active one.In html toggle between two menu using *ngIfcomparing with the activeItem.label.
创建模板引用变量#menuItems并在 ts 中使用它对该模板进行修改。单击另一个菜单时，它会触发activateMenu()函数，它将新选定的菜单设置为活动菜单。在 html 中使用*ngIf在两个菜单之间切换与activeItem.label进行比较。
This works for me.
这对我有用。
回答by Pardeep Jain
According to documentation of Primeng TabMenu there is not such functionality given by them you can only set attribute there is not a single callback function by default for the same
根据 Primeng TabMenu 的文档，他们没有提供这样的功能，您只能设置属性，默认情况下没有单个回调函数
Source:- * https://www.primefaces.org/primeng/#/tabmenu
来源：- * https://www.primefaces.org/primeng/#/tabmenu
Instead you can use breadcrumbfor redirecting page there you can provide URL too, than style that breadcrumb according to your need with css
相反，您可以使用breadcrumb重定向页面，您也可以提供 URL，而不是根据您的需要使用 css 设置面包屑的样式
https://www.primefaces.org/primeng/#/breadcrumb
https://www.primefaces.org/primeng/#/breadcrumb
Update
更新
you can use this there you can call callback function and navigation as well in menu
你可以在那里使用它你可以在菜单中调用回调函数和导航
