带有routerLinkActive和ngFor的ScrollIntoView()

时间:2019-10-18 14:22:49

标签: angular dom ngfor angular-router

我有关于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

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

1 个答案:

答案 0 :(得分:0)

在您的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;