在 Angular 中使用 ngClass 修改面包屑叶的 CSS 参数

Question

我正在 Angular 中开发一个 Breadcrumb 组件，它将显示有关路由的完整地址。帮助用户返回到之前的任何步骤。要获得实际的 url，我使用的是 ActivatedRoute。它工作正常。

我的问题是关于使用此示例样式 Breadcrumb 为最后一个元素设置不同的 class。 (Bootstrap 4) 在路由的最后一个元素上显示不同的样式。（数据使用 active 和 aria-current="page"）

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="/library">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

获取列表的最后一个元素并设置不同的 CSS class 我正在使用这个 example:

<li *ngFor="let item of items; let last = last" [ngClass]="{last: last}">{{item.path}}</li>

但我无法使用 css 文件实现启用 class="active" 和 aria-current="page" 的 objective :

.last{
  // I do not know how to enable from here active and arria-current
}

Answer 1

我终于实现了。没有必要使用 active class。

使用 pointer-event 您可以禁用单击 link 使用 CSS class 的选项。

HTML

<li *ngFor="let item of items; let last = last" [ngClass]="{last: last}">{{item.path}}</li>

CSS

.last a{
    color: grey;
    pointer-events: none;
}

在 Angular 中使用 ngClass 修改面包屑叶的 CSS 参数

Modify CSS parameters of Breadcrumb leaf with ngClass in Angular

breadcrumbs

ng-class

bootstrap-4

angular