Angular 如何在PrimeNG Panel菜单中使用模板

我需要在菜单项中添加一些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>

---

没有发生任何事情，它仍然显示菜单，就好像我没有添加模板一样。我错过了什么？

您不能在p-Panel菜单中使用，请尝试以下方式：

试试这个：

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

---

在当前的实现中，您不能。一个选项是覆盖组件并自己添加该功能

可以试一试吗？你能检查一下我的答案吗。我认为这种在panelMenuI中添加模板的方法也有同样的问题。你找到办法了吗？是的，最后我将menu.label和.ts中的'otherStuff'连接起来，就像这样：label:

${label}（${count}）

，我认为这会起作用，但我希望避免操纵DOM

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

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