PrimeNG面包屑组件出现异常斜杠问题求助

你遇到的这个多余"/"是由PrimeNG组件的伪元素样式生成的，之前CSS没生效大概率是因为Angular的视图封装机制导致样式无法穿透到PrimeNG组件内部。可以用以下两种方法解决：

方法一：组件内穿透样式（推荐） #

在使用p-breadcrumb的组件CSS文件中添加：

:host ::ng-deep li.p-breadcrumb-chevron.pi-circle-fill.ng-star-inserted::before {
  display: none;
}

:host确保样式只作用于当前组件内的面包屑，::ng-deep用来穿透Angular的视图封装，让样式能影响到PrimeNG的内部元素。

方法二：全局样式修改 #

如果不想用::ng-deep，可以在项目根目录的styles.css（或styles.scss）中添加全局样式：

li.p-breadcrumb-chevron.pi-circle-fill.ng-star-inserted::before {
  display: none;
}

这种方法会作用于整个项目中所有符合该选择器的元素，适合所有页面都需要去掉这个符号的场景。

补充说明 #

你不需要修改现有的HTML和TS代码，保持原有配置即可：

HTML代码 #

<p-breadcrumb [model]="breadcrumbItems" [home]="home">
</p-breadcrumb>

TS代码 #

this.home = { icon: 'pi pi-home', routerLink: "/" };

this.breadcrumbItems = [
  { label: "System", routerLink: "component1" },
  { label: "user", routerLink: "component2" }
];

内容的提问来源于stack exchange，提问作者Bing Bong