加载组件后，滚动到“材质手风琴”中的特定扩展面板

Question

我们正在尝试滚动到lapply中的特定mtcars[strsplit(as.character(df_col_names$col_names[1]), ",")[[1]]] 项目。问题是<mat-expansion-panel>在手风琴及其面板完全加载之前被触发。这意味着<mat-accordion>函数在手风琴加载时被调用，页面大小随后发生变化，从而使我们的滚动操作将我们带到错误的页面位置。

我们还尝试了其他生命周期挂钩，但没有帮助，因为它们都被称为早期。有人对此问题有好的做法吗？

我们的资料很简单，因为我们试图实现一些非常基本的东西：

landingpage.component.html

ngAfterViewInit()

landingpage.component.ts

scrollIntoView()

Answer 1

这里是StackBlitz上使用Angular Material 7的示例。您的技术效果很好，但是您需要注意以下几点-确保页面足够长，以便可以放置面板在页面顶部，并确保您不会拼写错误的面板ID。

Answer 2

在我的示例中，我单击某些东西，它打开了一个侧面导航，该屏幕占据了一半的屏幕，因此在单击功能上，我具有以下逻辑：

if ($event) {
    setTimeout(() => $event.target.scrollIntoView({behavior: 'smooth', block: 'end'}), 1);
}

因此，在您的示例中，您可以绑定到afterExpand事件（在mat-expansion-panel上）并运行逻辑。