对话框 Dialog

dialog 的 API

Angular Material dialog API 参考文档

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

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

Service to open Material Design modal dialogs.

属性
名称 描述

afterAllClosed: Observable<void>

当所有打开的对话框都关闭的时候会发出通知的流。如果没有打开的对话框,就会在订阅时立即触发。

Stream that emits when all open dialog have finished closing. Will emit on subscribe if there are no open dialogs to begin with.

afterOpened: Subject<MatDialogRef<any>>

当对话框打开后会发出通知的流。

Stream that emits when a dialog has been opened.

openDialogs: MatDialogRef<any>[]

跟踪当前打开的对话框。

Keeps track of the currently-open dialogs.

方法
closeAll

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

Closes all of the currently-open dialogs.

getDialogById

通过 id 查找一个打开的对话框。

Finds an open dialog by its id.

参数

Parameters

id

string

在查找对话框时要用到的 ID。

ID to use when looking up the dialog.

返回值

Returns

MatDialogRef<any> | undefined
open

打开一个包含指定组件的模态对话框。

Opens a modal dialog containing the given component.

参数

Parameters

component

ComponentType<T>

要加载到对话框中的组件类型。

Type of the component to load into the dialog.

config?

MatDialogConfig<D>

额外的配置选项。

Extra configuration options.

返回值

Returns

MatDialogRef<T, R>

引用新打开的对话框。

Reference to the newly-opened dialog.

open

打开一个包含指定模板的模态对话框。

Opens a modal dialog containing the given template.

参数

Parameters

template

TemplateRef<T>

TemplateRef 要实例化为对话框内容。

TemplateRef to instantiate as the dialog content.

config?

MatDialogConfig<D>

额外的配置选项。

Extra configuration options.

返回值

Returns

MatDialogRef<T, R>

引用新打开的对话框。

Reference to the newly-opened dialog.

open

参数

Parameters

template

ComponentType<T> | TemplateRef<T>

config?

MatDialogConfig<D>

返回值

Returns

MatDialogRef<T, R>

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

Button that will close the current dialog.

选择器: [mat-dialog-close] [matDialogClose]
导出为: matDialogClose
属性
名称 描述
@Input('aria-label')

ariaLabel: string

该按钮的屏幕阅读器标签。

Screenreader label for the button.

@Input('mat-dialog-close')

dialogResult: any

对话框关闭的输入属性。

Dialog close input.

@Input()

type: 'submit' | 'button' | 'reset'

默认为 “button” 以防止意外的表单提交。

Default to "button" to prevents accidental form submits.

dialogRef: MatDialogRef<any>

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

Title of a dialog element. Stays fixed to the top of the dialog when scrolling.

选择器: [mat-dialog-title] [matDialogTitle]
导出为: matDialogTitle
属性
名称 描述
@Input()

id: string

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

Scrollable content container of a dialog.

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

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

Container for the bottom action buttons in a dialog. Stays fixed to the bottom when scrolling.

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

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

Configuration for opening a modal dialog with the MatDialog service.

属性
名称 描述

ariaDescribedBy: string | null

描述该对话框元素的 ID。

ID of the element that describes the dialog.

ariaLabel: string | null

要分配给对话框元素的 Aria 标签。

Aria label to assign to the dialog element.

ariaLabelledBy: string | null

标记该对话框的元素的 ID。

ID of the element that labels the dialog.

autoFocus: boolean

打开对话框时是否应该让第一个可获取焦点的元素获得焦点。

Whether the dialog should focus the first focusable element on open.

backdropClass: string | string[]

背景板的自定义类。

Custom class for the backdrop.

closeOnNavigation: boolean

当用户在历史记录中后退时,该对话框是否会关闭。请注意,这通常不包括单击链接(除非用户正在使用 HashLocationStrategy )。

Whether the dialog should close when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).

componentFactoryResolver: ComponentFactoryResolver

备用 ComponentFactoryResolver,用于解析其关联组件。

Alternate ComponentFactoryResolver to use when resolving the associated component.

data: D | null

要注入到子组件中的数据。

Data being injected into the child component.

direction: Direction

对话框内容的布局方向

Layout direction for the dialog's content.

disableClose: boolean

用户是否可以使用 escape 或单击背景板来关闭该模态框。

Whether the user can use escape or clicking on the backdrop to close the modal.

hasBackdrop: boolean

对话框是否有背景板。

Whether the dialog has a backdrop.

height: string

该对话框的高度。

Height of the dialog.

id: string

该对话框的 ID。如果省略,就会生成一个唯一的。

ID for the dialog. If omitted, a unique one will be generated.

maxHeight: number | string

对话框的最大高度。如果提供了数字,则假设单位是像素。

Max-height of the dialog. If a number is provided, assumes pixel units.

maxWidth: number | string

对话框的最大宽度。如果提供了数字,则假设单位是像素。默认为 80vw。

Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw.

minHeight: number | string

对话框的最小高度。如果提供了数字,则假设单位是像素。

Min-height of the dialog. If a number is provided, assumes pixel units.

minWidth: number | string

对话框的最小宽度。如果提供了数字,则假设单位是像素。

Min-width of the dialog. If a number is provided, assumes pixel units.

panelClass: string | string[]

浮层面板的自定义类。

Custom class for the overlay pane.

position: DialogPosition

位置改写。

Position overrides.

restoreFocus: boolean

该对话框是否应该在关闭之前将焦点还给以前拥有焦点的元素。

Whether the dialog should restore focus to the previously-focused element, after it's closed.

role: DialogRole

该对话框元素的 ARIA 角色。

The ARIA role of the dialog element.

scrollStrategy: ScrollStrategy

用于对话框的滚动策略。

Scroll strategy to be used for the dialog.

viewContainerRef: ViewContainerRef

附加到组件应该位于 Angular 的逻辑组件树中。这会影响注入时的可用内容以及在对话框中实例化的组件的变更检测顺序。这不会影响对象内容的渲染位置。

Where the attached component should live in Angular's logical component tree. This affects what is available for injection and the change detection order for the component instantiated inside of the dialog. This does not affect where the dialog content will be rendered.

width: string

该对话框的宽度。

Width of the dialog.

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

Reference to a dialog opened via the MatDialog service.

属性
名称 描述

componentInstance: T

在对话框中打开的组件实例。

The instance of component opened into the dialog.

disableClose: boolean | undefined

是否允许用户关闭该对话框。

Whether the user is allowed to close the dialog.

id: string

方法
addPanelClass

把一个或一组 CSS 类添加到浮层面板中。

Add a CSS class or an array of classes to the overlay pane.

参数

Parameters

classes

string | string[]

返回值

Returns

this
afterClosed

获取一个会在对话框关闭后收到通知的可观察对象。

Gets an observable that is notified when the dialog is finished closing.

返回值

Returns

Observable<R | undefined>
afterOpened

获取一个会在对话框打开后得到通知的可观察对象。

Gets an observable that is notified when the dialog is finished opening.

返回值

Returns

Observable<void>
backdropClick

获取一个可观察对象,它会在点击浮层的背景板时发出。

Gets an observable that emits when the overlay's backdrop has been clicked.

返回值

Returns

Observable<MouseEvent>
beforeClosed

获取一个当对话框即将关闭时得到通知的可观察对象。

Gets an observable that is notified when the dialog has started closing.

返回值

Returns

Observable<R | undefined>
close

关闭对话框。

Close the dialog.

参数

Parameters

dialogResult?

R

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

Optional result to return to the dialog opener.

getState

获取对话框生命周期的当前状态。

Gets the current state of the dialog's lifecycle.

返回值

Returns

MatDialogState
keydownEvents

获取一个可观察对象,当 keydown 事件的目标是浮层时发出数据。

Gets an observable that emits when keydown events are targeted on the overlay.

返回值

Returns

Observable<KeyboardEvent>
removePanelClass

从浮层面板中删除一个或一组 CSS 类。

Remove a CSS class or an array of classes from the overlay pane.

参数

Parameters

classes

string | string[]

返回值

Returns

this
updatePosition

更新对话框的位置。

Updates the dialog's position.

参数

Parameters

position?

DialogPosition

新对话框位置。

New dialog position.

返回值

Returns

this
updateSize

更新对话框的宽度和高度。

Updates the dialog's width and height.

参数

Parameters

width

string = ''

对话框的新宽度。

New width of the dialog.

height

string = ''

对话框的新高度。

New height of the dialog.

返回值

Returns

this

可改写的对话框位置。

Possible overrides for a dialog's position.

属性
名称 描述

bottom: string

改写对话框的底部位置。

Override for the dialog's bottom position.

left: string

改写对话框的左侧位置。

Override for the dialog's left position.

right: string

改写对话框的右侧位置。

Override for the dialog's right position.

top: string

改写对话框的顶部位置。

Override for the dialog's top position.

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

Valid ARIA roles for a dialog element.

type DialogRole = 'dialog' | 'alertdialog';

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

Injection token that can be used to access the data that was passed in to a dialog.

const MAT_DIALOG_DATA: InjectionToken<any>;

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

Injection token that can be used to specify default dialog options.

const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;

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

Injection token that determines the scroll handling while the dialog is open.

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

Angular Material dialog-testing API 参考文档

import {MatDialogHarness} from '@angular/material/dialog/testing';

Harness for interacting with a standard MatDialog in tests.

方法
异步
close

Closes the dialog by pressing escape.

Note: this method does nothing if disableClose has been set to true for the dialog.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAllChildLoaders

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader[]>
异步
getAllHarnesses

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T[]>
异步
getAriaDescribedby

Gets the value of the dialog's "aria-describedby" attribute.

返回值

Returns

Promise<string | null>
异步
getAriaLabel

Gets the value of the dialog's "aria-label" attribute.

返回值

Returns

Promise<string | null>
异步
getAriaLabelledby

Gets the value of the dialog's "aria-labelledby" attribute.

返回值

Returns

Promise<string | null>
异步
getChildLoader

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader>
异步
getHarness

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T>
异步
getId

Gets the id of the dialog.

返回值

Returns

Promise<string | null>
异步
getRole

Gets the role of the dialog.

返回值

Returns

Promise<DialogRole | null>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

A set of criteria that can be used to filter a list of MatDialogHarness instances.