angular - 加载组件后滚动到 Material Accordion 中的特定扩展面板

Question

我们正在尝试滚动到特定的 <mat-expansion-panel> <mat-accordion> 中的项目.问题是 ngAfterViewInit()在 Accordion 及其面板完全加载之前触发。这意味着 scrollIntoView()在加载 Accordion 时调用函数，之后页面大小发生变化，使我们的滚动操作将我们带到页面的错误位置。

我们还尝试了其他生命周期 Hook ，但没有帮助，因为它们都被提前调用了。有人对这个问题有什么好的做法吗？

我们的源代码很简单，因为我们正在尝试实现一些非常基本的东西:

landingpage.component.html

<mat-accordion>
   <mat-expansion-panel id="pangel-1">
    <mat-expansion-panel-header>
      <mat-panel-title>Lorem ipsum</mat-panel-title>
    </mat-expansion-panel-header>
    <p>
      Lorem ipsum dolor sit amet,
      consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt...
    </p>
  </mat-expansion-panel>
  <mat-expansion-panel id="panel-2">
    <mat-expansion-panel-header>
      <mat-panel-title>Lorem ipsum</mat-panel-title>
    </mat-expansion-panel-header>
    <p>
      Lorem ipsum dolor sit amet,
      consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt...
    </p>
  </mat-expansion-panel> 

  [ ... ] // more panels

</mat-accordion>

landingpage.component.ts

ngAfterViewInit() {
  this.scroll("panel-1");
}

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Answer 1

这是关于 StackBlitz 的例子使用 Angular Material 7。你的技术工作正常，但你需要注意一些事情 - 确保页面足够长，以便面板可以位于页面顶部，并确保你不不要拼错面板的 ID。