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' });