Angular Material

import {MatMenuModule} from '@angular/material/menu';

指令

`MatMenu`

选择器： mat-menu

导出为： matMenu

属性

名称	描述
@Input('aria-describedby') `ariaDescribedby: string`	用于菜单面板的 aria-describedby。 aria-describedby for the menu panel.
@Input('aria-label') `ariaLabel: string`	用于菜单面板的 aria-label。 aria-label for the menu panel.
@Input('aria-labelledby') `ariaLabelledby: string`	用于菜单面板的 aria-labelledby。 aria-labelledby for the menu panel.
@Input() `backdropClass: string`	要添加到背景板元素中的类。 Class to be added to the backdrop element.
@Input() `hasBackdrop: boolean \| undefined`	菜单是否有背景板。 Whether the menu has a backdrop.
@Input() `overlapTrigger: boolean`	菜单是否应遮住其触发器。 Whether the menu should overlap its trigger.
@Input('class') `panelClass: string`	此方法会从宿主的 mat-menu 元素中取得一组类，并将它们应用在浮层容器中显示的菜单模板中。否则，将很难从组件外部设置其内部菜单的样式。 This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.
@Input() `xPosition: MenuPositionX`	菜单在 X 轴上的位置。 Position of the menu in the X axis.
@Input() `yPosition: MenuPositionY`	菜单在 Y 轴的位置。 Position of the menu in the Y axis.
@Output() `closed: EventEmitter<void \| 'click' \| 'keydown' \| 'tab'>`	当菜单关闭时会发出本事件。 Event emitted when the menu is closed.
`direction: Direction`	菜单的布局方向。 Layout direction of the menu.
`overlayPanelClass: string \| string[]`	类的类或要添加到浮层面板的类列表。 Class or list of classes to be added to the overlay panel.
panelId: `mat-menu-panel-${menuPanelUid++}`
`parentMenu: MatMenuPanel \| undefined`	当前菜单面板的父菜单。 Parent menu of the current menu panel.
@Input() 已弃用 `classList: string`	此方法会从宿主的 mat-menu 元素中取得一组类，并将它们应用在浮层容器中显示的菜单模板中。否则，将很难从组件外部设置其内部菜单的样式。 This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.
@Output() 已弃用 `close: EventEmitter<void \| 'click' \| 'keydown' \| 'tab'>`	当菜单关闭时会发出本事件。 Event emitted when the menu is closed.
已弃用 `items: QueryList<MatMenuItem>`	菜单里面的菜单项列表。 List of the items inside of a menu.

方法

addItem

addItem
_item `MatMenuItem`

参数

Parameters

_item

MatMenuItem

focusFirstItem

focusFirstItem
让菜单中的第一项获得焦点。 Focus the first item in the menu.
origin `FocusOrigin = 'program'`	导致获得焦点的动作来源。用来设置正确的样式。 Action from which the focus originated. Used to set the correct styling.

让菜单中的第一项获得焦点。

Focus the first item in the menu.

参数

Parameters

origin

FocusOrigin = 'program'

导致获得焦点的动作来源。用来设置正确的样式。

Action from which the focus originated. Used to set the correct styling.

resetActiveItem
重置菜单中的活动菜单项。这会在打开菜单时使用，允许用户当按下向下箭头时从第一个菜单项开始。 Resets the active item in the menu. This is used when the menu is opened, allowing the user to start from the first option when pressing the down arrow.

resetActiveItem

重置菜单中的活动菜单项。这会在打开菜单时使用，允许用户当按下向下箭头时从第一个菜单项开始。

Resets the active item in the menu. This is used when the menu is opened, allowing the user to start from the first option when pressing the down arrow.

setElevation

setElevation
设置菜单面板的纵深。 Sets the menu panel elevation.
depth `number`	本菜单前的父菜单数量。 Number of parent menus that come before the menu.

设置菜单面板的纵深。

Sets the menu panel elevation.

参数

Parameters

depth

number

本菜单前的父菜单数量。

Number of parent menus that come before the menu.

`MatMenuItem`

mat-menu 里面的单个菜单项。提供菜单项样式和无障碍性处理。

Single item inside of a mat-menu. Provides the menu item styling and accessibility treatment.

选择器： [mat-menu-item]

导出为： matMenuItem

属性

名称描述

名称	描述
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `role: 'menuitem' \| 'menuitemradio' \| 'menuitemcheckbox'`	菜单项的 ARIA 角色。 ARIA role for the menu item.

@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

Whether the component is disabled.

@Input()

role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox'

菜单项的 ARIA 角色。

ARIA role for the menu item.

方法

focus
让本菜单项获得焦点。 Focuses the menu item.
参数 Parameters
origin? `FocusOrigin`
options? `FocusOptions`

getLabel

getLabel
获取在确定该选项是否应该获得焦点时使用的标签。 Gets the label to be used when determining whether the option should be focused.
`string`

获取在确定该选项是否应该获得焦点时使用的标签。

Gets the label to be used when determining whether the option should be focused.

返回值

Returns

string

`MatMenuTrigger`

Directive（Directive）应用于一个触发 mat-menu 的元素。

Directive applied to an element that should trigger a mat-menu.

选择器： [mat-menu-trigger-for] [matMenuTriggerFor]

导出为： matMenuTrigger

属性

名称	描述
@Input('matMenuTriggerFor') `menu: MatMenuPanel<any>`	引用触发器所关联的菜单实例。 References the menu instance that the trigger is associated with.
@Input('matMenuTriggerData') `menuData: any`	要传递给任何一段时间的惰性内容的数据。 Data to be passed along to any lazily-rendered content.
@Input('matMenuTriggerRestoreFocus') `restoreFocus: boolean`	当菜单关闭时，是否要恢复焦点。请注意，禁用此选项可能会产生辅助功能，如果你决定将其关闭，则可由此来管理焦点。 Whether focus should be restored when the menu is closed. Note that disabling this option can have accessibility implications and it's up to you to manage focus, if you decide to turn it off.
@Output() `menuClosed: EventEmitter<void>`	当关联的菜单关闭时会发出本事件。 Event emitted when the associated menu is closed.
@Output() `menuOpened: EventEmitter<void>`	关联菜单打开时发出的事件。 Event emitted when the associated menu is opened.
`dir: Direction`	包含该应用的文字方向。 The text direction of the containing app.
`menuOpen: boolean`	菜单是否已打开。 Whether the menu is open.
@Output() 已弃用 `onMenuClose: EventEmitter<void>`	当关联的菜单关闭时会发出本事件。 Event emitted when the associated menu is closed.
@Output() 已弃用 `onMenuOpen: EventEmitter<void>`	关联菜单打开时发出的事件。 Event emitted when the associated menu is opened.

方法

closeMenu
关闭菜单。 Closes the menu.

closeMenu

关闭菜单。

Closes the menu.

focus
重点关注菜单触发器。 Focuses the menu trigger.
参数 Parameters
origin? `FocusOrigin`	菜单触发器的焦点来源于此。 Source of the menu trigger's focus.
options? `FocusOptions`

openMenu
打开菜单 Opens the menu.

openMenu

打开菜单

Opens the menu.

toggleMenu
在打开状态和关闭状态之间切换菜单。 Toggles the menu between the open and closed states.

toggleMenu

在打开状态和关闭状态之间切换菜单。

Toggles the menu between the open and closed states.

triggersSubmenu

triggersSubmenu
菜单是触发了子菜单，还是触发了顶级菜单。 Whether the menu triggers a sub-menu or a top-level one.
`boolean`

菜单是触发了子菜单，还是触发了顶级菜单。

Whether the menu triggers a sub-menu or a top-level one.

返回值

Returns

boolean

`MatMenuContent`

菜单打开后，菜单内容会惰性渲染。

Menu content that will be rendered lazily once the menu is opened.

选择器： ng-template[matMenuContent]

接口

`MatMenuDefaultOptions`

默认的 mat-menu 选项，可以改写它们。

Default mat-menu options that can be overridden.

属性

名称	描述
`backdropClass: string`	要应用于菜单背景板的类。 Class to be applied to the menu's backdrop.
`hasBackdrop: boolean`	菜单是否有背景板。 Whether the menu has a backdrop.
`overlapTrigger: boolean`	此菜单是否应该盖住菜单触发器。 Whether the menu should overlap the menu trigger.
`overlayPanelClass: string \| string[]`	要应用于菜单浮层面板的类或类列表。 Class or list of classes to be applied to the menu's overlay panel.
`xPosition: MenuPositionX`	菜单的 x 轴位置。 The x-axis position of the menu.
`yPosition: MenuPositionY`	菜单的 y 轴位置。 The y-axis position of the menu.

类型别名

`MenuPositionX`

type MenuPositionX = 'before' | 'after';

`MenuPositionY`

type MenuPositionY = 'above' | 'below';

常量

`MAT_MENU_DEFAULT_OPTIONS`

这个注入令牌用来改写 mat-menu 的默认选项。

Injection token to be used to override the default options for mat-menu.

const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;

`MAT_MENU_SCROLL_STRATEGY`

当注册菜单打开时，它确定滚动处理的注入令牌。

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

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

`MAT_MENU_CONTENT`

这个注入令牌可以用来引用 MatMenuContent 实例。它可以作为实际 MatMenuContent 类的备用令牌，直接使用实际类可能导致该类及其元数据无法被优化掉。

Injection token that can be used to reference instances of MatMenuContent. It serves as alternative token to the actual MatMenuContent class which could cause unnecessary retention of the class and its directive metadata.

const MAT_MENU_CONTENT: InjectionToken<MatMenuContent>;

import {MatMenuHarness} from '@angular/material/menu/testing';

类

`MatMenuHarness` extends ContentContainerComponentHarness

在测试中用来与标准 mat-menu 进行交互的测试工具。

Harness for interacting with a standard mat-menu in tests.

方法

异步 blur
Blurs the menu.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

Blurs the menu.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 clickItem
Clicks an item in the menu, and optionally continues clicking items in subsequent sub-menus.
参数 Parameters
itemFilter `Pick<MenuItemHarnessFilters, "text" \| "selector" \| "hasSubmenu">`	A filter used to represent which item in the menu should be clicked. The first matching menu item will be clicked.
subItemFilters	A list of filters representing the items to click in any subsequent sub-menus. The first item in the sub-menu matching the corresponding filter in `subItemFilters` will be clicked.
...subItemFilters `Pick<MenuItemHarnessFilters, "text" \| "selector" \| "hasSubmenu">[]`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

异步 close
关闭菜单。 Closes the menu.
`Promise<void>`	Promise that resolves when the action completes.

异步

关闭菜单。

Closes the menu.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 focus
Focuses the menu.
`Promise<void>`	Promise that resolves when the action completes.

异步

focus

Focuses the menu.

返回值

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

异步 getChildLoader
参数 Parameters
selector `S`
返回值 Returns
`Promise<HarnessLoader>`

异步 getHarness
参数 Parameters
query `HarnessQuery<T>`
返回值 Returns
`Promise<T>`

异步 getItems
Gets a list of `MatMenuItemHarness` representing the items in the menu.
参数 Parameters
filters `Pick<MenuItemHarnessFilters, "text" \| "selector" \| "hasSubmenu"> = {}`	Optionally filters which menu items are included.
返回值 Returns
`Promise<MatMenuItemHarness[]>`

异步 getRootHarnessLoader
`Promise<HarnessLoader>`

异步

getRootHarnessLoader

返回值

Returns

Promise<HarnessLoader>

异步 getTriggerText
Gets the text of the menu's trigger element.
`Promise<string>`

异步

getTriggerText

Gets the text of the menu's trigger element.

返回值

Returns

Promise<string>

异步 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>

异步 isDisabled
Whether the menu is disabled.
`Promise<boolean>`

异步

isDisabled

Whether the menu is disabled.

返回值

Returns

Promise<boolean>

异步 isFocused
Whether the menu is focused.
`Promise<boolean>`

异步

isFocused

Whether the menu is focused.

返回值

Returns

Promise<boolean>

异步 isOpen
菜单是否已打开。 Whether the menu is open.
`Promise<boolean>`

异步

isOpen

菜单是否已打开。

Whether the menu is open.

返回值

Returns

Promise<boolean>

异步 open
打开菜单 Opens the menu.
`Promise<void>`	Promise that resolves when the action completes.

异步

open

打开菜单

Opens the menu.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

`MatMenuItemHarness` extends ContentContainerComponentHarness

在测试中用来与标准 mat-menu-item 进行交互的测试工具。

Harness for interacting with a standard mat-menu-item in tests.

方法

异步 blur
Blurs the menu item.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

Blurs the menu item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 click
Clicks the menu item.
`Promise<void>`	Promise that resolves when the action completes.

异步

click

Clicks the menu item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 focus
让本菜单项获得焦点。 Focuses the menu item.
`Promise<void>`	Promise that resolves when the action completes.

异步

focus

让本菜单项获得焦点。

Focuses the menu item.

返回值

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

异步 getChildLoader
参数 Parameters
selector `S`
返回值 Returns
`Promise<HarnessLoader>`

异步 getHarness
参数 Parameters
query `HarnessQuery<T>`
返回值 Returns
`Promise<T>`

异步 getSubmenu
Gets the submenu associated with this menu item, or null if none.
`Promise<MatMenuHarness \| null>`

异步

getSubmenu

Gets the submenu associated with this menu item, or null if none.

返回值

Returns

Promise<MatMenuHarness | null>

异步 getText
Gets the text of the menu item.
`Promise<string>`

异步

getText

Gets the text of the menu item.

返回值

Returns

Promise<string>

异步 hasSubmenu
Whether this item has a submenu.
`Promise<boolean>`

异步

hasSubmenu

Whether this item has a submenu.

返回值

Returns

Promise<boolean>

异步 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>

异步 isDisabled
Whether the menu is disabled.
`Promise<boolean>`

异步

isDisabled

Whether the menu is disabled.

返回值

Returns

Promise<boolean>

异步 isFocused
Whether the menu item is focused.
`Promise<boolean>`

异步

isFocused

Whether the menu item is focused.

返回值

Returns

Promise<boolean>

接口

`MenuHarnessFilters`

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

属性

名称	描述
`triggerText: string \| RegExp`	Only find instances whose trigger text matches the given value.

`MenuItemHarnessFilters`

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

属性

名称描述

名称	描述
`hasSubmenu: boolean`	Only find instances that have a sub-menu.
`text: string \| RegExp`	只查找其文本内容匹配指定值的实例。 Only find instances whose text matches the given value.

hasSubmenu: boolean

Only find instances that have a sub-menu.

text: string | RegExp

只查找其文本内容匹配指定值的实例。

Only find instances whose text matches the given value.

菜单 API 目录

Testing

菜单 Menu