专注于Angular 7 / 7+ Typescript中的Bootstrap Dropdown元素

Question

我正在尝试在打开下拉菜单时着重于特定的（引导程序）下拉菜单元素。由于Bootstrap使用PopperJS / Jquery，因此它们在Angular的代码之外运行（据我了解）

这是指@ConnorsFan对How to get an element in *ngFor in Angular dynamically without using Js id selector的解决方案

我可以使用Javascript setTimout方法来实现此目的，但是想知道最好的方法

需要修复的代码-> https://stackblitz.com/edit/angular-nmvn6g

在开设Dropdown第7周时应重点关注

Answer 1

@ConnorsFan的解决方案是使用Bootstrap和ng-Bootstrap Js代替常规的Jquery / popper.js

Answer 2

在CSS中添加以下代码

.focus {
  background-color: dodgerblue;
  color: white;
}

在component.ts中添加以下代码

  ngAfterViewChecked() {
   if (this.anchorList.length > 0) {
    const weekIndex = this.weekList.indexOf(this.currentWeek);
    const elementRef = this.anchorList.find((item, index) => index === weekIndex);
    elementRef.nativeElement.classList.add('focus');
  }
}