如何动态地用下拉项替换面包屑项

Question

嗨，我正在尝试使用 angular 创建面包屑项。现在是这样的：

所以我为面包屑项目创建了一个下拉菜单，我正在努力做的是：

当我点击下拉列表中的项目时，它会与面包屑项目交换位置。在我的示例中，如果我单击“Geysers del Tatio (Lujo)”，它将在面包屑视图中替换“Geysers del Tatio (Standard)”，而“Geysers del Tatio (Standard)”将替换“Geysers del Tatio (Lujo)”在下拉列表中。

我的代码在这里分享： https://stackblitz.com/edit/angular-ivy-fbgntk?file=src/app/app.component.html

Answer 1

实现您想要的目标的一种方法是在您的组件中维护一个状态，该状态指示当前从所有可能选项的列表中选择了哪个“子”面包屑。

export class AppComponent {
  public readonly libraryItems = [
    'Geysers del Tatio (Standard)',
    'Geysers del Tatio (Superior)',
    'Geysers del Tatio (Lujo)',
  ];

  public activeItem = this.libraryItems[0];
}

有了这些，您就可以在组件的模板中呈现活动的下拉项，以及剩余项选择的列表。

<li class="breadcrumb-item active drop-container">
  <a href="#">
    <!-- display currently selected dropdown item -->
    <span>{{ activeItem }}</span>
    <span class="glyphicon glyphicon-triangle-bottom small" aria-hidden="true"></span>
  </a>

  <div class="drop bg-white">
    <ul>

      <!-- loop all dropdown items -->
      <li *ngFor="let item of libraryItems">

        <!-- ...but only render dropdown items that are not active -->
        <span *ngIf="item !== activeItem">{{ item }}</span>

      </li>
    </ul>

  </div>
</li>

最后，要添加交换下拉文本的行为，您可以在单击选择中的下拉项时挂接该逻辑，如下所示：

<!-- in the component template -->
<span *ngIf="item !== activeItem" (click)="activeItem = item">{{ item }}</span>

这是一个工作演示： https://stackblitz.com/edit/angular-ivy-xcp3wg?file=src/app/app.component.html

如何动态地用下拉项替换面包屑项

How to replace breadcrumb item with the dropdown item dynamically

javascript

bootstrap-4

angular