如何使用模板PrimeNG panelMenu

Question

我需要在菜單項中添加一些HTML代碼，所以我嘗試使用自定義顯示：

我的模板：

<p-panelMenu styleClass="main-menu" class="main-menu" [model]="menus"> 
    <ng-template let-menus pTemplate> 
     {{menus.label}} <span>otherStuff</span> 
    </ng-template> 
</p-panelMenu> 

組件：

this.menus = [ 
     { 
      label: 'Dashboard', 
      icon: 'fa-home', 
      routerLink: '/home' 
     }, 
    ... 

什麼也沒有發生，它仍然顯示菜單，就好像我沒有添加模板。我錯過了什麼？

Answer 1

你不能對panelMenu內使用，因此嘗試下面這樣：

試試這個：

<p-panelMenu styleClass="main-menu" class="main-menu" [model]="menus"> 
</p-panelMenu> 

component.ts

export class AppComponent implements AfterViewInit { 
    menus: MenuItem[]; 

    constructor(
    ) { 

     this.menus = [{ 
      label: 'Dashboard', 
      icon: 'fa-home', 
      routerLink: '/home' 
     }] 
    } 

    ngAfterViewInit() { 
     let element1 = document.createElement('span') 
     let element2 = document.createTextNode('otherStuff'); 
     element1.appendChild(element2) 
     let d1 = document.getElementsByClassName('ui-menuitem-text')[0].appendChild(element1); 
    } 
}