web-dev-qa-db-ja.com

プライムngのタブメニュー

タブメニューのクリックでコンポーネントテンプレートをロードしたい。

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

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

これは私のコードです。 2つのメニュー連絡先と通話ログが表示されます。 conatctメニューをクリックすると、ロードしたいcontactcomponent.htmlそして通話履歴メニューをクリックするとロードcalllogscomponent.html。どうすればこれを実装できますか？

angulartypescriptvisual-studio-codeprimeng
4
Basil Joy

これがトップレベルメニューである場合（またはメインページの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']}
            ]
        }];
    }
}
5
Simon_Weaver
<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を使用して2つのメニューを切り替えます。 activeItem.label と比較します。

これは私にとってはうまくいきます。

2
Jeevana

Primeng TabMenuのドキュメントによると、それらによって提供されるそのような機能はありません。属性を設定することしかできません。デフォルトでは、同じコールバック関数は1つもありません。

出典：-* https://www.primefaces.org/primeng/#/tabmen

代わりに、ページをリダイレクトするためにbreadcrumbを使用できます。必要に応じて、cssでパンくずリストを作成するよりも、URLを指定することもできます。

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

更新

ここでこれを使用でき、メニューでコールバック関数とナビゲーションを呼び出すこともできます

0
Pardeep Jain