ScrollIntoView()与routerLinkActive和ngFor

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. Listen this.router.events

上的更改

毫无办法。它是在指令添加类之前触发的。

Answer 1

在html中，您可以这样做(我添加了#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;

在你可以打电话之后：

this. somethingToTarget.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });