Quiero cargar una plantilla de componente en el menú de pestañas, haga clic.
<p-tabMenu class="ui-tabmenu" [model]="items"></p-tabMenu> this.items = [ {label: 'Contacts', icon: 'fa-bar-chart'}, {label: 'Call Logs', icon: 'fa-calendar'} ]; Este es mi código. Muestra dos contactos de menú y registros de llamadas. cuando hago clic en el menú de contacto, quiero cargar contactcomponent.html y cuando hago clic en el menú de registros de llamadas, cargue calllogscomponent.html . ¿Cómo puedo implementar esto?
Si este es su menú de nivel superior (o desea configurar la URL de la página principal), considere usar el enrutador. Esto se sincronizará automáticamente con la 'página' actual configurada en el enrutador:
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']} ] }]; } }<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']; }Cree la variable de referencia de la plantilla #menuItems y utilícela en ts para hacer modificaciones en esa plantilla. Al hacer clic en otro menú, activa la función activar Menú () donde establece el nuevo menú seleccionado como uno activo. En html, alterna entre dos menús usando * ngIf comparándolo con activeItem.label .
Esto funciona para mí.
De acuerdo con la documentación de Primeng TabMenu, no existe tal funcionalidad proporcionada por ellos, solo puede establecer el atributo, no hay una sola función de devolución de llamada de forma predeterminada para el mismo
Fuente:- * https://www.primefaces.org/primeng/#/tabmenu
En su lugar, puede usar la ruta de breadcrumb para redirigir la página allí, también puede proporcionar la URL, luego diseñe esa ruta de navegación de acuerdo con su necesidad con css
https://www.primefaces.org/primeng/#/breadcrumb
puede usar esto allí, puede llamar a la función de devolución de llamada y navegación también en el menú