Angular Material

Angular Material dialog API 参考文档

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

服务

`MatDialog`

用于打开 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.

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.

closeAll

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

Closes all of the currently-open dialogs.

getDialogById
通过 id 查找一个打开的对话框。 Finds an open dialog by its id. 在查找对话框时要用到的 ID。 @param id ID to use when looking up the dialog.
参数 Parameters
id `string`
返回值 Returns
`MatDialogRef<any> \| undefined`

open
打开一个包含指定组件的模态对话框。 Opens a modal dialog containing the given component. 要加载到对话框中的组件类型。 @param component Type of the component to load into the dialog. 额外的配置选项。 @param config Extra configuration options. 引用新打开的对话框。 @returns Reference to the newly-opened dialog.
参数 Parameters
component `ComponentType<T>`
config? `MatDialogConfig<D>`
返回值 Returns
`MatDialogRef<T, R>`	引用新打开的对话框。 Reference to the newly-opened dialog.

open
打开一个包含指定模板的模态对话框。 Opens a modal dialog containing the given template. TemplateRef 要实例化为对话框内容。 @param template TemplateRef to instantiate as the dialog content. 额外的配置选项。 @param config Extra configuration options. 引用新打开的对话框。 @returns Reference to the newly-opened dialog.
参数 Parameters
template `TemplateRef<T>`
config? `MatDialogConfig<D>`
返回值 Returns
`MatDialogRef<T, R>`	引用新打开的对话框。 Reference to the newly-opened dialog.

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

指令

`MatDialogClose`

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

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>`

`MatDialogTitle`

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

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

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

导出为： matDialogTitle

属性

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

`MatDialogContent`

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

Scrollable content container of a dialog.

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

`MatDialogActions`

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

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

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

类

`MatDialogConfig`

使用 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.

`MatDialogRef`

通过 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`

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

afterClosed
获取一个会在对话框关闭后收到通知的可观察对象。 Gets an observable that is notified when the dialog is finished closing.
`Observable<R \| undefined>`

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

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

返回值

Returns

Observable<R | undefined>

afterOpened

afterOpened
获取一个会在对话框打开后得到通知的可观察对象。 Gets an observable that is notified when the dialog is finished opening.
`Observable<void>`

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

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

返回值

Returns

Observable<void>

backdropClick

backdropClick
获取一个可观察对象，它会在点击浮层的背景板时发出。 Gets an observable that emits when the overlay's backdrop has been clicked.
`Observable<MouseEvent>`

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

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

返回值

Returns

Observable<MouseEvent>

beforeClosed

beforeClosed
获取一个当对话框即将关闭时得到通知的可观察对象。 Gets an observable that is notified when the dialog has started closing.
`Observable<R \| undefined>`

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

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

返回值

Returns

Observable<R | undefined>

close
关闭对话框。 Close the dialog. 返回到窗口对话框的可选结果。 @param dialogResult Optional result to return to the dialog opener.
dialogResult? `R`

关闭对话框。

Close the dialog.

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

@param dialogResult Optional result to return to the dialog opener.

参数

Parameters

dialogResult?

R

getState

getState
获取对话框生命周期的当前状态。 Gets the current state of the dialog's lifecycle.
`MatDialogState`

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

Gets the current state of the dialog's lifecycle.

返回值

Returns

MatDialogState

keydownEvents

keydownEvents
获取一个可观察对象，当 keydown 事件的目标是浮层时发出数据。 Gets an observable that emits when keydown events are targeted on the overlay.
`Observable<KeyboardEvent>`

获取一个可观察对象，当 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. 新对话框位置。 @param position New dialog position.
参数 Parameters
position? `DialogPosition`
返回值 Returns
`this`

updateSize
更新对话框的宽度和高度。 Updates the dialog's width and height. 对话框的新宽度。 @param width New width of the dialog. 对话框的新高度。 @param height New height of the dialog.
参数 Parameters
width `string = ''`
height `string = ''`
返回值 Returns
`this`

接口

`DialogPosition`

可改写的对话框位置。

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.

类型别名

`DialogRole`

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

Valid ARIA roles for a dialog element.

type DialogRole = 'dialog' | 'alertdialog';

常量

`MAT_DIALOG_DATA`

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

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

const MAT_DIALOG_DATA: InjectionToken<any>;

`MAT_DIALOG_DEFAULT_OPTIONS`

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

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

const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;

`MAT_DIALOG_SCROLL_STRATEGY`

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

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';

类

`MatDialogHarness` extends ContentContainerComponentHarness

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.
`Promise<void>`	Promise that resolves when the action completes.

异步

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.
`Promise<string \| null>`

异步

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.
`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.
`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.
`Promise<string \| null>`

异步

getId

Gets the id of the dialog.

返回值

Returns

Promise<string | null>

异步 getRole
Gets the role of the dialog.
`Promise<DialogRole \| null>`

异步

getRole

Gets the role of the dialog.

返回值

Returns

Promise<DialogRole | null>

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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

返回值

Returns

Promise<TestElement>

接口

`DialogHarnessFilters`

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

对话框 API 目录

Testing

Angular Material dialog API 参考文档

link 服务

link MatDialog

属性

方法

link 指令

link MatDialogClose

属性

link MatDialogTitle

属性

link MatDialogContent

link MatDialogActions

link 类

link MatDialogConfig

属性

link MatDialogRef

属性

方法

link 接口

link DialogPosition

属性

link 类型别名

link DialogRole

link 常量

link MAT_DIALOG_DATA

link MAT_DIALOG_DEFAULT_OPTIONS

link MAT_DIALOG_SCROLL_STRATEGY

Angular Material dialog-testing API 参考文档

link 类

link MatDialogHarness extends ContentContainerComponentHarness

方法

link 接口

link DialogHarnessFilters

服务

`MatDialog`

指令

`MatDialogClose`

`MatDialogTitle`

`MatDialogContent`

`MatDialogActions`

类

`MatDialogConfig`

`MatDialogRef`

接口

`DialogPosition`

类型别名

`DialogRole`

常量

`MAT_DIALOG_DATA`

`MAT_DIALOG_DEFAULT_OPTIONS`

`MAT_DIALOG_SCROLL_STRATEGY`

类

`MatDialogHarness` extends ContentContainerComponentHarness

接口

`DialogHarnessFilters`