递归引导面包屑在角

Question

我想使用引导面包屑（https://getbootstrap.com/docs/4.0/components/breadcrumb/）。

我有一个组件，该组件的使用类似于文件系统中的目录视图。我想使用面包屑来显示当前目录的整个路径。

这是我的文件夹组件模板：

<div class="breadcrumb">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <app-breadcrumb class="breadcrumb" (refresh)="goToGroup($event)" [parent]="currentGroup?.parent" [displayProperty]="'code'" *ngIf="currentGroup !== undefined && currentGroup.parent"></app-breadcrumb>
        </ol>
    </nav>
</div>

这是我的面包屑组件模板：

<li class="breadcrumb-item">
    <a (click)="goTo(parent.uid)">{{parent[displayProperty]}}</a>
</li>
<app-breadcrumb (refresh)="refreshFolder($event)" [parent]="parent.parent" [displayProperty]="displayProperty" *ngIf="parent.parent" class="breadcrumb"></app-breadcrumb>

问题是，引导程序使用的css选择器在这里不起作用，这是由于angular所添加的节点所致：

例如，此选择器不起作用：

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    padding-left: .5rem;
    color: #6c757d;
    content: "/";
}

我尝试了一些尝试，但无法使其正常工作。

能请你帮我吗？

谢谢！

Answer 1

+选择器用于选择紧接在最后一个元素之后的元素。

<div class="parent"></div>
<div class="nextParent"></div>

因此您可以使用：

.parent + .nextParent {}

根据您的情况，应使用选择器>，该选择器用于选择父级为上一个元素的元素。

.breadcrumb > .breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  padding-left: .5rem;
  color: #6c757d;
  content: "/";
}

或:::之前，我不知道您到底需要什么。