带有routerLinkActive和ngFor的ScrollIntoView（）

Question

我有关于routerLinkActive的列表：

<div *ngFor="let experimentType of experimentTypeList">
  <a class="d-flex align-items-center experiemnt-link-button selectable-item"
     [routerLink]="getScenarioExperimentTypeLink(experimentType)"
     routerLinkActive="link-button-selected">
     {{ experimentType.name }}
  </a>
</div>

当其中一个链接被激活时，我想将其滚动到视图中（通过scrollIntoView（））。

我可以手动执行此操作：

<div (click)="scroll()">scroll()</div>

  public scroll(): void {
    this.elementRef.nativeElement.querySelector('.link-button-selected').scrollIntoView()
  }

但是我不知道如何以编程方式进行操作。

我尝试过：

1. AfterViewInit，OnChanges
2. 收听@ViewChildren（'rla'）上的更改，
3. 收听this.router.events

没有任何效果。它在指令添加类之前被触发。

Answer 1

在您的html中，您可以执行以下操作（我添加了*/foo/）：

#somethingToTarget

在您的组件代码中：

<a class="d-flex align-items-center experiemnt-link-button selectable-item"
 #somethingToTarget
 [routerLink]="getScenarioExperimentTypeLink(experimentType)"
 routerLinkActive="link-button-selected">
 {{ experimentType.name }}
</a>

然后您可以致电：

@ViewChild('somethingToTarget') somethingToTarget: ElementRef;