Angular Material 对话框的 API 参考

import {MatDialogModule} from '@angular/material/dialog';

服务

`MatDialog`

用于打开 Material Design 模态对话框的服务。

属性

名称	描述
`afterAllClosed: Observable<void>`	当所有打开的对话框都关闭的时候会发出通知的流。如果没有打开的对话框，就会在订阅时立即触发。
`afterOpened: Subject<MatDialogRef<any>>`	当对话框打开后会发出通知的流。
`dialogConfigClass: MatDialogConfig`
`openDialogs: MatDialogRef<any>[]`	跟踪当前打开的对话框。

方法

closeAll
关闭所有当前打开的对话框。

getDialogById
通过 id 查找一个打开的对话框。
参数
id `string`	在查找对话框时要用到的 ID。
返回值
`MatDialogRef<any> \| undefined`

open
打开一个包含指定组件的模态对话框。
参数
component `ComponentType<T>`	要加载到对话框中的组件类型。
配置 ? `MatDialogConfig<D>`	额外的配置选项。
返回值
`MatDialogRef<T, R>`	引用新打开的对话框。

open
打开一个包含指定模板的模态对话框。
参数
template `TemplateRef<T>`	TemplateRef 要实例化为对话框内容。
配置 ? `MatDialogConfig<D>`	额外的配置选项。
返回值
`MatDialogRef<T, R>`	引用新打开的对话框。

open
参数
template `ComponentType<T> \| TemplateRef<T>`
配置 ? `MatDialogConfig<D>`
返回值
`MatDialogRef<T, R>`

指令

`MatDialogActions`

对话框中底部操作按钮的容器。当滚动时，它会固定在底部。

选择器： [mat-dialog-actions] mat-dialog-actions [matDialogActions]

属性

名称	描述
@Input() `align: 'start' \| 'center' \| 'end'`	操作按钮的水平对齐方式。

`MatDialogClose`

该按钮用于关闭当前对话框。

选择器： [mat-dialog-close] [matDialogClose]

Exported as: matDialogClose

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	该按钮的屏幕阅读器标签。
@Input('mat-dialog-close') `dialogResult: any`	对话框关闭的输入属性。
@Input() `type: 'submit' \| 'button' \| 'reset'`	默认为 “button” 以防止意外的表单提交。
`dialogRef: MatDialogRef<any>`

`MatDialogTitle`

该对话框元素的标头。当滚动时，它会固定在对话框的顶部。

选择器： [mat-dialog-title] [matDialogTitle]

Exported as: matDialogTitle

属性

名称	描述
@Input() `id: string`

`MatDialogContent`

对话框的可滚动内容容器。

选择器： [mat-dialog-content] mat-dialog-content [matDialogContent]

`MatDialogContainer`

选择器： mat-dialog-container

属性

名称	描述
Deprecated `attachDomPortal: (portal: DomPortal) => { if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' \|\| ngDevMode)) { throwDialogContentAlreadyAttachedError(); } const result = this._portalOutlet.attachDomPortal(portal); this._contentAttached(); return result; }`	将 DOM 门户附加到对话框容器。

方法

attach
参数
portal `ComponentPortal<T>`
返回值
`ComponentRef<T>`

attach
参数
portal `TemplatePortal<T>`
返回值
`EmbeddedViewRef<T>`

attach
参数
portal `any`
返回值
`any`

attachComponentPortal
参数
portal `ComponentPortal<T>`
返回值
`ComponentRef<T>`

attachTemplatePortal
将模板门户作为内容附加到此对话框容器。
参数
portal `TemplatePortal<T>`	要作为对话框内容附加的门户。
返回值
`EmbeddedViewRef<T>`

detach
拆除以前附着过的传送点。

dispose
永久销毁这个 Portal 宿主。

hasAttached
该宿主是否有附着的传送点。
返回值
`boolean`

类

`MatDialogConfig`

使用 MatDialog 服务打开的模态对话框的配置。

属性

名称	描述
`ariaDescribedBy: string \| null`	描述该对话框元素的 ID。
`ariaLabel: string \| null`	要分配给对话框元素的 Aria 标签。
`ariaLabelledBy: string \| null`	标记该对话框的元素的 ID。
`ariaModal: boolean`	这是否是模态对话框。用于设置 `aria-modal` 属性。
`autoFocus: AutoFocusTarget \| string \| boolean`	当对话框打开时应该聚焦到哪里。
`backdropClass: string \| string[]`	背景板的自定义类。
`closeOnNavigation: boolean`	当用户在历史记录中后退时，该对话框是否会关闭。请注意，这通常不包括单击链接（除非用户正在使用 `HashLocationStrategy` ）。
`componentFactoryResolver: ComponentFactoryResolver`	备用 `ComponentFactoryResolver`，用于解析其关联组件。
`data: D \| null`	注入到子组件中的数据。
`delayFocusTrap: boolean`	是否等待开场动画完成后再捕获焦点。
`direction: Direction`	对话框内容的布局方向。
`disableClose: boolean`	用户是否可以使用 escape 或单击背景板来关闭该模态框。
`enterAnimationDuration: string \| number`	进场动画的持续时间，以毫秒为单位。应该是一个数字，字符串类型的值已经弃用。
`exitAnimationDuration: string \| number`	进场动画的持续时间，以毫秒为单位。应该是一个数字，字符串类型的值已经弃用。
`hasBackdrop: boolean`	对话框是否有背景板。
`height: string`	该对话框的高度。
`id: string`	该对话框的 ID。如果省略，就会生成一个唯一的。
`injector: Injector`	用于实例化要附着到的组件的注入器。如果提供，则优先于由 `ViewContainerRef` 间接提供的注入器。
`maxHeight: number \| string`	对话框的最大高度。如果提供了数字，则假设单位是像素。
`maxWidth: number \| string`	对话框的最大宽度。如果提供了数字，则假设单位是像素。默认为 80vw。
`minHeight: number \| string`	对话框的最小高度。如果提供了数字，则假设单位是像素。
`minWidth: number \| string`	对话框的最小宽度。如果提供了数字，则假设单位是像素。
`panelClass: string \| string[]`	浮层面板的自定义类。
`position: DialogPosition`	位置改写。
`restoreFocus: boolean`	该对话框是否应该在关闭之前将焦点还给以前拥有焦点的元素。
`role: DialogRole`	该对话框元素的 ARIA 角色。
`scrollStrategy: ScrollStrategy`	用于对话框的滚动策略。
`viewContainerRef: ViewContainerRef`	附着到组件应该位于 Angular 的逻辑组件树中。这会影响注入时的可用内容以及在对话框中实例化的组件的变更检测顺序。这不会影响对象内容的渲染位置。
`width: string`	该对话框的宽度。

`MatDialogRef`

通过 MatDialog 服务打开的对话框的引用。

属性

名称	描述
`componentInstance: T`	在对话框中打开的组件实例。
`componentRef: ComponentRef<T> \| null`	打开到对话框中的组件的 `ComponentRef`。如果使用 `TemplateRef` 打开对话框，则此值为 null。
`disableClose: boolean \| undefined`	是否允许用户关闭该对话框。
`id: string`	对话框的唯一 ID。

方法

addPanelClass
把一个或一组 CSS 类添加到浮层面板中。
参数
classes `string \| string[]`
返回值
`this`

afterClosed
获取一个会在对话框关闭后收到通知的可观察对象。
返回值
`Observable<R \| undefined>`

afterOpened
获取一个会在对话框打开后得到通知的可观察对象。
返回值
`Observable<void>`

backdropClick
获取一个可观察对象，当点击浮层的背景板时，它会发出数据。
返回值
`Observable<MouseEvent>`

beforeClosed
获取一个当对话框即将关闭时得到通知的可观察对象。
返回值
`Observable<R \| undefined>`

close
关闭对话框。
dialogResult ? `R`	返回到窗口对话框的可选结果。

关闭对话框。

参数

dialogResult ?

R

返回到窗口对话框的可选结果。

getState
获取对话框生命周期的当前状态。
返回值
`MatDialogState`

keydownEvents
获取一个可观察对象，当指定浮层收到 keydown 事件时，它会发出数据。
返回值
`Observable<KeyboardEvent>`

removePanelClass
从浮层面板中删除一个或一组 CSS 类。
参数
classes `string \| string[]`
返回值
`this`

updatePosition
更新对话框的位置。
参数
position ? `DialogPosition`	新对话框位置。
返回值
`this`

updateSize
更新对话框的宽度和高度。
参数
width `string = ''`	对话框的新宽度。
height `string = ''`	对话框的新高度。
返回值
`this`

接口

`DialogPosition`

可改写的对话框位置。

属性

名称	描述
`bottom: string`	改写对话框的底部位置。
`left: string`	改写对话框的左侧位置。
`right: string`	改写对话框的右侧位置。
`top: string`	改写对话框的顶部位置。

类型别名

`AutoFocusTarget`

用于在对话框打开时自动将焦点设置到何处的选项

type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';

`DialogRole`

对话框元素的有效 ARIA 角色。

type DialogRole = 'dialog' | 'alertdialog';

常量

`MAT_DIALOG_DATA`

这个注入令牌可以用来访问那些传入对话框的数据。

const MAT_DIALOG_DATA: InjectionToken<any>;

`MAT_DIALOG_DEFAULT_OPTIONS`

这个注入令牌可以用来指定默认的对话框选项。

const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;

`MAT_DIALOG_SCROLL_STRATEGY`

一个注入令牌，它在对话框打开时确定滚动的处理方式。

const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;