如何在PrimeNG panelMenu中使用模板

Question

我需要在菜单条目中添加一些html代码，因此我尝试使用<span>来自定义显示：

我的模板：

<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'
        },
    ...

我添加了模板，但没有任何效果，菜单还是显示原来的样子。我错过了什么吗？

- Lempkin

---

有没有可能提供一个演示？ - Vega

你能帮我检查一下我的答案吗？我认为这是在panelMenu中添加模板的方法。 - Chandru

我有同样的问题。你找到解决方法了吗？如果找到了，请分享一下。 - Hossein Bajan

是的，最终我在.ts文件中将menu.label和'otherStuff'连接起来，像这样：label: ${label} (${count})。 - Lempkin

Answer 1

目前的实现方式不支持此功能。一种选择是覆盖组件并自行添加该功能。

- Himanshu Arora

Answer 2

你不能在 p-panelMenu 中使用 <a> 标签，所以请尝试以下方法：

试试这个：

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

- Chandru

---

我认为这个方案可行，但是我想避免操纵 DOM。 - Lempkin