Angular中如何将PrimeNG面包屑的pi-chevron-right替换为黑点

方法一：直接使用组件自带属性（优先尝试） #

如果你的PrimeNG版本支持separator属性，直接在模板里设置即可：

<p-breadcrumb [model]="items" separator="•"></p-breadcrumb>

这个圆点默认就是黑色，无需额外样式调整。

方法二：通过CSS自定义样式 #

若版本不支持上述属性，用CSS隐藏原有箭头并添加圆点：

1. 在组件的样式文件（比如your-component.component.scss）中添加代码：

/* 隐藏默认的箭头分隔符 */
.p-breadcrumb .p-breadcrumb-chevron {
  display: none;
}

/* 给非最后一项的面包屑添加黑色圆点 */
.p-breadcrumb li:not(:last-child)::after {
  content: "•";
  color: #000;
  margin: 0 0.5rem;
  font-size: 1rem;
}

2. 要是样式没生效，添加深度选择器提升优先级：

::ng-deep .p-breadcrumb .p-breadcrumb-chevron {
  display: none;
}

::ng-deep .p-breadcrumb li:not(:last-child)::after {
  content: "•";
  color: #000;
  margin: 0 0.5rem;
  font-size: 1rem;
}

内容的提问来源于stack exchange，提问作者Vanitha Vasanth