如何在 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>

组件.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);
    }
}