Angular PrimeNG 菜单栏：隐藏菜单标题旁边的默认向下箭头答案

【问题标题】：Angular PrimeNG menubar: Hide default down arrows next to menu titlesAngular PrimeNG 菜单栏：隐藏菜单标题旁边的默认向下箭头
【发布时间】：2020-06-21 14:44:22
【问题描述】：

默认的 PrimeNG 菜单栏在每个主菜单标题旁边都有一个向下箭头。我想从顶级菜单标题中完全删除向下箭头。嵌套的子菜单可能会显示一个右箭头，表示有一个子菜单，那些可以保留。以下是一些带有默认菜单栏的屏幕截图：

https://www.primefaces.org/primeng/showcase/#/menubar

我可以轻松更改菜单项中的图标，但找不到更改/隐藏箭头的句柄。

我正在使用 Angular CLI 9.1.8 和 PrimeNG 9.1.0。

【问题讨论】：

能否请您提供具有默认 PrimeNG 配置的 StackBlitz？
我尝试在 stackblitz 中进行设置，但 ngcc 编译器失败并出现错误“ngcc 无法在primeng@9.1.0 上运行”。我会继续努力解决这个问题，如果我能正常工作，我会发布更新。

标签： css angular primeng

【解决方案1】：

在 style.css 中隐藏它，改变它的内容

.pi-caret-down::before{
   content: "";
}

在开发者控制台中检查元素字体名称，然后将其在 css 之前设置为 content: "";

【讨论】：

【解决方案2】：

使用display:none 的另一个好处是可以调整menuitem 容器的大小以适应已移除的箭头图标。否则，您将留下一个空格。

.pi-caret-down {
   display:none;
}

【讨论】：