使用 Angular Material Dialog 滚动到对话框顶部

【问题标题】：Scroll to top of a dialog using Angular Material Dialog使用 Angular Material Dialog 滚动到对话框顶部
【发布时间】：2021-05-17 17:59:33
【问题描述】：

使用Angular Material Dialog 组件显示两个表单（一个被隐藏，另一个被填写）。第一个表单提交后，它被隐藏，第二个显示（在同一个对话框中）。

问题：当第一个表单被隐藏并显示第二个表单时，滚动位置没有更新（显示对话框的顶部），因此用户看到了第二个表单的中间或底部。

我尝试执行window.scroll 或scrollTo 功能，但它们不起作用。有什么想法吗？

【问题讨论】：

您可以展示一些代码，特别是您如何隐藏/显示您的表单吗？
@QuentinGrisel 只需在控制器中使用布尔属性并在视图中执行*ngIf 签入。

标签： angular angular-material

【解决方案1】：

有两种方法可以解决这个问题：

解决方案 1：使用 *ngIf 隐藏您的表单

我认为最好的方法可能是使用 *ngIf 指令来隐藏元素，而不是使用 [hidden] 属性。使用*ngIf 的好处是，如果不满足条件，它不会在 DOM 中渲染元素。因此，如果元素被隐藏，它不会影响滚动位置。

解决方案 2：使用scrollIntoView()

您可以使用Element.scrollIntoView() 方法将元素滚动到视图中。首先，您需要获取要在视口中显示的元素，在这种情况下将是第二个 <form></form> 元素。使用document.getElementbyId() 获取元素或使用Angular ViewChild 并在元素上调用scrollIntroView() 方法。 MDN Web Docs - Element.scrollIntoView()

【讨论】：