javascript - 如何使scrollIntoView()在第一次点击时起作用(Angular 6)？

Question

之前类似 StackOverflow 问题的解决方案主要集中在 Jquery 上，没有找到针对 Angular 6/Javascript 的可能解决方案。

目前，我正在使用scrollIntoView()，其行为平滑地滚动到使用路由器导出动态创建的div，但它仅在第二次单击后滚动，我的代码中是否有任何问题，或者是否可以在中实现它第一次点击？

HTML:

<div>
  <mat-card-title (click)="articleNavigation(documents._id)">{{documents.title}}</mat-card-title>
</div>
<div #test style="width:50%; margin-left: auto; margin-right: auto;">
  <router-outlet></router-outlet>
</div>

ts:

articleNavigation(documentId) {
 this.router.navigate(['./document' , documentId], { relativeTo: this.route });
 this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
}

如果我使用行为自动而不是平滑，它会在第一次单击时起作用，但首选平滑过渡。我认为可能的原因之一是第一次单击时，创建了 div，第二次单击时，scrollIntoView() 转换为 div。

Answer 1

试试这个:

setTimeout(() => {
    this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
});