Angular Material

Angular Material autocomplete API 参考文档

import {MatAutocompleteModule} from '@angular/material/autocomplete';

指令

`MatAutocomplete`

选择器： mat-autocomplete

导出为： matAutocomplete

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	选择器的 Aria 标签。如果没有指定，占位符就会用作标签。 Aria label of the select. If not specified, the placeholder will be used as label.
@Input('aria-labelledby') `ariaLabelledby: string`	用于指定 `aria-labelledby` 属性的输入属性。 Input that can be used to specify the `aria-labelledby` attribute.
@Input() `autoActiveFirstOption: boolean`	当自动完成面板打开时，是否应突出显示第一个选项。可以通过 `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` 令牌进行全局配置。 Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
@Input('class') `classList: string \| string[]`	取得 mat-autocomplete 宿主元素上设置的类，并把它们应用到浮层容器中的面板上，以便指定样式。 Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `displayWith: ((value: any) => string) \| null`	一个函数，用来将选项的控件值映射到触发器中的显示值。 Function that maps an option's control value to its display value in the trigger.
@Input() `panelWidth: string \| number`	指定自动完成面板的宽度。可以是任何 CSS 尺寸值，否则就会匹配它的宿主宽度。 Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.
@Output() `closed: EventEmitter<void>`	自动完成面板关闭时发出的事件 Event that is emitted when the autocomplete panel is closed.
@Output() `opened: EventEmitter<void>`	自动完成面板打开时发出的事件 Event that is emitted when the autocomplete panel is opened.
@Output() `optionActivated: EventEmitter<MatAutocompleteActivatedEvent>`	只要使用键盘激活某个选项，就会发出触发本事件。 Emits whenever an option is activated using the keyboard.
@Output() `optionSelected: EventEmitter<MatAutocompleteSelectedEvent>`	每次从列表中选择一个选项时就会发出的事件。 Event that is emitted whenever an option from the list is selected.
`id: string`	供自动完成触发器的 “aria-owns” 属性使用的唯一 ID。 Unique ID to be used by autocomplete trigger's "aria-owns" property.
`isOpen: boolean`	自动完成面板是否已打开。 Whether the autocomplete panel is open.
`optionGroups: QueryList<MatOptgroup>`
`options: QueryList<MatOption>`
`panel: ElementRef`	容纳自动完成选项的面板元素。 Element for the panel containing the autocomplete options.
`showPanel: boolean`	自动填充功能面板是否可见，取决于选项的长度。 Whether the autocomplete panel should be visible, depending on option length.

`MatAutocompleteTrigger`

选择器： input[matAutocomplete] textarea[matAutocomplete]

导出为： matAutocompleteTrigger

属性

名称	描述
@Input('matAutocomplete') `autocomplete: _MatAutocompleteBase`	要附加到此触发器的自动完成面板。 The autocomplete panel to be attached to this trigger.
@Input('matAutocompleteDisabled') `autocompleteDisabled: boolean`	是否禁用了自动完成器。当禁用时，该元素和常规输入框的行为相同，用户将无法打开该面板。 Whether the autocomplete is disabled. When disabled, the element will act as a regular input and the user won't be able to open the panel.
@Input('matAutocompleteConnectedTo') `connectedTo: _MatAutocompleteOriginBase`	用来定位自动完成面板的基准点。默认为本自动完成触发器元素。 Reference relative to which to position the autocomplete panel. Defaults to the autocomplete trigger element.
@Input('matAutocompletePosition') `position: 'auto' \| 'above' \| 'below'`	自动完成面板相对于触发器元素的位置。`auto` 位置会让该面板在触发器下方渲染，前提是它有足够的空间放进本视口中，否则面板就会显示在它的上方。如果位置设为 `above` 或 `below` ，则面板将始终显示在触发器的上方或下方，无论它是否完全适合本视口。 Position of the autocomplete panel relative to the trigger element. A position of `auto` will render the panel underneath the trigger if there is enough space for it to fit in the viewport, otherwise the panel will be shown above it. If the position is set to `above` or `below`, the panel will always be shown above or below the trigger. no matter whether it fits completely in the viewport.
`activeOption: MatOption \| null`	当前处于活动状态的选项，强制转换为 MatOption 类型。 The currently active option, coerced to MatOption type.
`optionSelections: Observable<MatOptionSelectionChange>`	自动完成选项的选择流。 Stream of autocomplete option selections.
`panelClosingActions: Observable<MatOptionSelectionChange \| null>`	会导致关闭自动完成面板的一系列动作，包括当选择了某个选项时、失去焦点时，以及当按下 TAB 时。 A stream of actions that should close the autocomplete panel, including when an option is selected, on blur, and when TAB is pressed.
`panelOpen: boolean`	自动完成面板是否处于已打开状态。 Whether or not the autocomplete panel is open.

方法

closePanel
关闭自动完成建议面板。 Closes the autocomplete suggestion panel.

closePanel

关闭自动完成建议面板。

Closes the autocomplete suggestion panel.

openPanel
打开自动完成建议面板。 Opens the autocomplete suggestion panel.

openPanel

打开自动完成建议面板。

Opens the autocomplete suggestion panel.

updatePosition
更新自动完成建议面板的位置，以确保它能容纳视口中的所有选项。 Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.

updatePosition

更新自动完成建议面板的位置，以确保它能容纳视口中的所有选项。

Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.

`MatAutocompleteOrigin`

指令应用于某个元素，以使其可用作自动完成面板的连接点。

Directive applied to an element to make it usable as a connection point for an autocomplete panel.

选择器： [matAutocompleteOrigin]

导出为： matAutocompleteOrigin

属性

名称	描述
`elementRef: ElementRef<HTMLElement>`	Reference to the element on which the directive is applied.

类

`MatAutocompleteSelectedEvent`

选定某个自动完成选项时发出的事件对象。

Event object that is emitted when an autocomplete option is selected.

属性

名称	描述
`option: _MatOptionBase`	Option that was selected.
`source: _MatAutocompleteBase`	Reference to the autocomplete panel that emitted the event.

接口

`MatAutocompleteActivatedEvent`

激活某个自动完成选项时发出的事件对象。

Event object that is emitted when an autocomplete option is activated.

属性

名称描述

名称	描述
`option: _MatOptionBase \| null`	选定的选项。 Option that was selected.
`source: _MatAutocompleteBase`	引用那个发出本事件的自动完成器面板。 Reference to the autocomplete panel that emitted the event.

option: _MatOptionBase | null

选定的选项。

Option that was selected.

source: _MatAutocompleteBase

引用那个发出本事件的自动完成器面板。

Reference to the autocomplete panel that emitted the event.

`MatAutocompleteDefaultOptions`

默认的 mat-autocomplete 选项，可被改写。

Default mat-autocomplete options that can be overridden.

属性

名称描述

名称	描述
`autoActiveFirstOption: boolean`	当打开自动完成面板时，是否应突出显示第一个选项。 Whether the first option should be highlighted when an autocomplete panel is opened.
`overlayPanelClass: string \| string[]`	类或类的列表，应用在自动完成器的弹出面板中。 Class or list of classes to be applied to the autocomplete's overlay panel.

autoActiveFirstOption: boolean

当打开自动完成面板时，是否应突出显示第一个选项。

Whether the first option should be highlighted when an autocomplete panel is opened.

overlayPanelClass: string | string[]

类或类的列表，应用在自动完成器的弹出面板中。

Class or list of classes to be applied to the autocomplete's overlay panel.

常量

`MAT_AUTOCOMPLETE_DEFAULT_OPTIONS`

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

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

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

`AUTOCOMPLETE_OPTION_HEIGHT`

已弃用

每个自动完成选项的高度。

The height of each autocomplete option.

const AUTOCOMPLETE_OPTION_HEIGHT: 48;

`AUTOCOMPLETE_PANEL_HEIGHT`

已弃用

自动完成面板的总高度。

The total height of the autocomplete panel.

const AUTOCOMPLETE_PANEL_HEIGHT: 256;

`MAT_AUTOCOMPLETE_SCROLL_STRATEGY`

当自动完成面板打开时，注入令牌决定了滚动处理策略。

Injection token that determines the scroll handling while the autocomplete panel is open.

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

Angular Material autocomplete-testing API 参考文档

import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';

类

`MatAutocompleteHarness` extends ComponentHarness

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

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

方法

异步 blur
为自动完成器输入框取消焦点。 Blurs the autocomplete input.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

为自动完成器输入框取消焦点。

Blurs the autocomplete input.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 enterText
在自动完成器中输入文字。 Enters text into the autocomplete.
参数 Parameters
value `string`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

异步 focus
为自动完成器输入框设置焦点。 Focuses the autocomplete input.
`Promise<void>`	Promise that resolves when the action completes.

异步

focus

为自动完成器输入框设置焦点。

Focuses the autocomplete input.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 getOptionGroups
获取自动完成面板中的选项组。 Gets the option groups inside the autocomplete panel.
参数 Parameters
filters `Pick<OptgroupHarnessFilters, "selector" \| "labelText"> = {}`
返回值 Returns
`Promise<MatOptgroupHarness[]>`

异步 getOptions
获取自动完成面板中的选项。 Gets the options inside the autocomplete panel.
参数 Parameters
filters `Pick<OptionHarnessFilters, "text" \| "isSelected" \| "selector"> = {}`
返回值 Returns
`Promise<MatOptionHarness[]>`

异步 getValue
获取自动完成器输入框的值。 Gets the value of the autocomplete input.
`Promise<string>`

异步

getValue

获取自动完成器输入框的值。

Gets the value of the autocomplete input.

返回值

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 autocomplete input is disabled.
`Promise<boolean>`

异步

isDisabled

是否禁用了自动完成器输入框。

Whether the autocomplete input is disabled.

返回值

Returns

Promise<boolean>

异步 isFocused
自动完成器输入框是否拥有焦点。 Whether the autocomplete input is focused.
`Promise<boolean>`

异步

isFocused

自动完成器输入框是否拥有焦点。

Whether the autocomplete input is focused.

返回值

Returns

Promise<boolean>

异步 isOpen
本自动完成器是否已打开。 Whether the autocomplete is open.
`Promise<boolean>`

异步

isOpen

本自动完成器是否已打开。

Whether the autocomplete is open.

返回值

Returns

Promise<boolean>

异步 selectOption
选择与指定的过滤器匹配的第一个选项。 Selects the first option matching the given filters.
参数 Parameters
filters `OptionHarnessFilters`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

接口

`AutocompleteHarnessFilters`

一组可以用来过滤 MatAutocompleteHarness 实例列表的条件。

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

属性

名称描述

名称	描述
`value: string \| RegExp`	只找到那些关联的输入框元素匹配指定值的实例。 Only find instances whose associated input element matches the given value.

value: string | RegExp

只找到那些关联的输入框元素匹配指定值的实例。

Only find instances whose associated input element matches the given value.

自动完成 API 目录

Testing

Angular Material autocomplete API 参考文档

link 指令

link MatAutocomplete

属性

link MatAutocompleteTrigger

属性

方法

link MatAutocompleteOrigin

属性

link 类

link MatAutocompleteSelectedEvent

属性

link 接口

link MatAutocompleteActivatedEvent

属性

link MatAutocompleteDefaultOptions

属性

link 常量

link MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

link AUTOCOMPLETE_OPTION_HEIGHT

link AUTOCOMPLETE_PANEL_HEIGHT

link MAT_AUTOCOMPLETE_SCROLL_STRATEGY

Angular Material autocomplete-testing API 参考文档

link 类

link MatAutocompleteHarness extends ComponentHarness

方法

link 接口

link AutocompleteHarnessFilters

属性

指令

`MatAutocomplete`

`MatAutocompleteTrigger`

`MatAutocompleteOrigin`

类

`MatAutocompleteSelectedEvent`

接口

`MatAutocompleteActivatedEvent`

`MatAutocompleteDefaultOptions`

常量

`MAT_AUTOCOMPLETE_DEFAULT_OPTIONS`

`AUTOCOMPLETE_OPTION_HEIGHT`

`AUTOCOMPLETE_PANEL_HEIGHT`

`MAT_AUTOCOMPLETE_SCROLL_STRATEGY`

类

`MatAutocompleteHarness` extends ComponentHarness

接口

`AutocompleteHarnessFilters`