Angular Material autocomplete API 参考

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

指令

`MatAutocomplete`

自动完成组件。

选择器： mat-autocomplete

Exported as: matAutocomplete

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	选择器的 Aria 标签。
@Input('aria-labelledby') `ariaLabelledby: string`	用于指定 `aria-labelledby` 属性的输入属性。
@Input({ transform: booleanAttribute }) `autoActiveFirstOption: boolean`	当自动完成面板打开时，是否应突出显示第一个选项。可以通过 `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` 令牌进行全局配置。
@Input({ transform: booleanAttribute }) `autoSelectActiveOption: boolean`	在用户导航时是否应选择活动选项。
@Input('class') `classList: string \| string[]`	取得 mat-autocomplete 宿主元素上设置的类，并把它们应用到浮层容器中的面板上，以便指定样式。
@Input({ transform: booleanAttribute }) `disableRipple: boolean`	是否在自动完成面板中禁用波纹。
@Input() `displayWith: ((value: any) => string) \| null`	一个函数，用来将选项的控件值映射到触发器中的显示值。
@Input({ transform: booleanAttribute }) `hideSingleSelectionIndicator: boolean`	是否隐藏单选选项的复选标记指示器。
@Input() `panelWidth: string \| number`	指定自动完成面板的宽度。可以是任意 CSS 尺寸值，否则就会匹配它的宿主宽度。
@Input({ transform: booleanAttribute }) `requireSelection: boolean`	是否要求用户在与自动完成交互时进行选择。如果用户在未从列表中选择选项的情况下离开自动完成，则该值将被重置。如果用户打开面板并在未交互或选择值的情况下关闭面板，则将保留初始值。
@Output() `closed: EventEmitter<void>`	自动完成面板关闭时发出的事件。
@Output() `opened: EventEmitter<void>`	自动完成面板打开时发出的事件。
@Output() `optionActivated: EventEmitter<MatAutocompleteActivatedEvent>`	只要激活某个选项，就会发出触发本事件。
@Output() `optionSelected: EventEmitter<MatAutocompleteSelectedEvent>`	每次从列表中选择一个选项时就会发出的事件。
`id: string`	供自动完成触发器的 “aria-owns” 属性使用的唯一 ID。
`isOpen: boolean`	自动完成面板是否已打开。
`optionGroups: QueryList<MatOptgroup>`	对自动完成中所有选项组的引用。
`options: QueryList<MatOption>`	对自动完成中所有选项的引用。
`panel: ElementRef`	容纳自动完成选项的面板元素。
`showPanel: boolean`	自动填充功能面板是否可见，取决于选项的长度。

`MatAutocompleteOrigin`

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

选择器： [matAutocompleteOrigin]

Exported as: matAutocompleteOrigin

属性

名称	描述
`elementRef: ElementRef<HTMLElement>`	对此指令要应用到的元素的引用。

`MatAutocompleteTrigger`

包含所有 MatAutocompleteTrigger 功能的基类。

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

Exported as: matAutocompleteTrigger

属性

名称	描述
@Input('matAutocomplete') `autocomplete: MatAutocomplete`	要附着到此触发器的自动完成面板。
@Input({ alias: 'matAutocompleteDisabled', transform: booleanAttribute }) `autocompleteDisabled: boolean`	是否禁用了自动完成器。当禁用时，该元素和常规输入框的行为相同，用户将无法打开该面板。
@Input('matAutocompleteConnectedTo') `connectedTo: MatAutocompleteOrigin`	用来定位自动完成面板的基准点。默认为本自动完成触发器元素。
@Input('matAutocompletePosition') `position: 'auto' \| 'above' \| 'below'`	自动完成面板相对于触发器元素的位置。`auto` 位置会让该面板在触发器下方渲染，前提是它有足够的空间放进本视口中，否则面板就会显示在它的上方。如果位置设为 `above` 或 `below`，则面板将始终显示在触发器的上方或下方，无论它是否完全适合本视口。
`activeOption: MatOption \| null`	当前处于活动状态的选项，强制转换为 MatOption 类型。
`optionSelections: Observable<MatOptionSelectionChange>`	对自动完成选项的选择状态的更改流。
`panelClosingActions: Observable<MatOptionSelectionChange \| null>`	会导致关闭自动完成面板的一系列动作，包括当选择了某个选项时、失焦时，以及当按下 TAB 时。
`panelOpen: boolean`	自动完成面板是否处于已打开状态。

方法

closePanel
关闭自动完成建议面板。

openPanel
打开自动完成建议面板。

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

类

`MatAutocompleteSelectedEvent`

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

属性

名称	描述
`option: MatOption`	已选择的选项。
`source: MatAutocomplete`	对发出此事件的自动完成面板的引用。

接口

`MatAutocompleteActivatedEvent`

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

属性

名称	描述
`option: MatOption \| null`	已选择的选项。
`source: MatAutocomplete`	对发出此事件的自动完成面板的引用。

`MatAutocompleteDefaultOptions`

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

属性

名称	描述
`autoActiveFirstOption: boolean`	当打开自动完成面板时，是否应突出显示第一个选项。
`autoSelectActiveOption: boolean`	在用户导航时是否应选择活动选项。
`hideSingleSelectionIndicator: boolean`	是否应隐藏单选的图标指示器。
`overlayPanelClass: string \| string[]`	类或类的列表，应用在自动完成器的弹出面板中。
`requireSelection: boolean`	当用户与自动完成交互时，是否要求用户进行选择。

常量

`MAT_AUTOCOMPLETE_DEFAULT_OPTIONS`

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

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

`MAT_AUTOCOMPLETE_SCROLL_STRATEGY`

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

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