Angular material2对话框(mat对话框)单击关闭时将页面滚动到顶部。

Angular Material是一个UI组件库，提供了一套现代化的UI组件，其中包括对话框（Dialog）组件。在Angular Material中，对话框组件被称为MatDialog。

MatDialog是一个弹出式对话框，用于显示临时的信息、警告、确认或其他与用户交互的内容。当用户单击对话框中的关闭按钮时，可以通过一些方法将页面滚动到顶部。

要实现单击关闭对话框时将页面滚动到顶部，可以按照以下步骤进行操作：

1. 首先，确保已经安装了Angular Material和相关依赖。可以通过npm命令进行安装：

npm install @angular/material @angular/cdk

1. 在需要使用对话框的组件中，导入MatDialog模块和相关依赖：

import { MatDialog } from '@angular/material/dialog';
import { ViewportScroller } from '@angular/common';

1. 在组件的构造函数中注入MatDialog和ViewportScroller：

constructor(private dialog: MatDialog, private viewportScroller: ViewportScroller) { }

1. 创建一个方法来打开对话框，并在对话框关闭时将页面滚动到顶部：

openDialog(): void {
  const dialogRef = this.dialog.open(DialogComponent);

  dialogRef.afterClosed().subscribe(() => {
    this.viewportScroller.scrollToPosition([0, 0]);
  });
}

在上述代码中，openDialog()方法用于打开对话框。dialog.open()方法用于打开对话框组件，其中DialogComponent是你自定义的对话框组件。

dialogRef.afterClosed()方法返回一个Observable，当对话框关闭时会触发subscribe()中的回调函数。在回调函数中，使用viewportScroller.scrollToPosition()方法将页面滚动到顶部。

1. 在组件的模板中添加一个按钮，并绑定openDialog()方法：

<button mat-button (click)="openDialog()">打开对话框</button>

通过以上步骤，当用户单击对话框中的关闭按钮时，页面将会滚动到顶部。

关于Angular Material对话框的更多信息和使用方法，可以参考腾讯云的相关文档和示例代码：

• Angular Material Dialog
• Angular Material Dialog API