菜单 Menu

menu 的 API

Angular Material menu API 参考文档

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

选择器: 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

参数

Parameters

_item

MatMenuItem
focusFirstItem

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

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.

setElevation

设置菜单面板的纵深。

Sets the menu panel elevation.

参数

Parameters

depth

number

本菜单前的父菜单数量。

Number of parent menus that come before the menu.

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.

方法
focus

让本菜单项获得焦点。

Focuses the menu item.

参数

Parameters

origin?

FocusOrigin

options?

FocusOptions
getLabel

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

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

返回值

Returns

string

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.

focus

重点关注菜单触发器。

Focuses the menu trigger.

参数

Parameters

origin?

FocusOrigin

菜单触发器的焦点来源于此。

Source of the menu trigger's focus.

options?

FocusOptions
openMenu

打开菜单

Opens the menu.

toggleMenu

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

Toggles the menu between the open and closed states.

triggersSubmenu

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

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

返回值

Returns

boolean

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

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

选择器: ng-template[matMenuContent]

默认的 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.

type MenuPositionX = 'before' | 'after';
type MenuPositionY = 'above' | 'below';

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

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

const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;

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

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

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

这个注入令牌可以用来引用 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>;

Angular Material menu-testing API 参考文档

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

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

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

方法
异步
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.

返回值

Returns

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

返回值

Returns

Promise<HarnessLoader>
异步
getTriggerText

Gets the text of the menu's trigger element.

返回值

Returns

Promise<string>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

Whether the menu is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

Whether the menu is focused.

返回值

Returns

Promise<boolean>
异步
isOpen

菜单是否已打开。

Whether the menu is open.

返回值

Returns

Promise<boolean>
异步
open

打开菜单

Opens the menu.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

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

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

方法
异步
blur

Blurs the menu item.

返回值

Returns

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.

返回值

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.

返回值

Returns

Promise<MatMenuHarness | null>
异步
getText

Gets the text of the menu item.

返回值

Returns

Promise<string>
异步
hasSubmenu

Whether this item has a submenu.

返回值

Returns

Promise<boolean>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

Whether the menu is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

Whether the menu item is focused.

返回值

Returns

Promise<boolean>

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.

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.