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

당신은 P-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); 
    } 
}