如何将痕迹导航设置为活动状态或在单击时突出显示它

Question

标题显示从A到Z的字母。

<div class="col-sm-9">
   <ol class="breadcrumb">
      <li *ngFor="let letter of letters"><a (click)="onLetter(letter)">{{letter}}</a></li>
  </ol> 
</div>

下面是我的组件代码：

onLetter(searchStr: string){
   localStorage.setItem('letter', searchStr);
   this._entertainmentService.searchByLetter(searchStr);
   this._router.navigate(['/et/movies/movies']);  
}

感谢您的帮助。

Answer 1

将当前选定的字母存储在组件的属性中（例如 currentLetter ），并使用它来动态地将类添加到 <a>...</a> 标记。例如：

<a (click)="onLetter(letter)" [class.active]="letter == currentLetter">
  {{letter}}
</a>

当然，您必须根据自己的情况调整此代码：您可能需要将类添加 <li> 标记，或者使用与 active 等不同的 CSS 类。