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);
    }
}

Answer 2

截至目前的实现，您还不能这样做。一种选择是覆盖组件并自己添加功能。

如何在PrimeNG panelMenu中使用模板

2 个答案: