Angular Material

Angular Material sort API 参考文档

import {MatSortModule} from '@angular/material/sort';

服务

`MatSortHeaderIntl`

要修改显示的标签和文本，就要创建一个 MatSortHeaderIntl 的新实例，并把它包含在自定义提供者中。

To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and include it in a custom provider.

属性

名称描述

名称	描述
`changes: Subject<void>`	只要这里的标签发生了变化就会发出流。如果标签在初始化后发生了变化，就用它来通知组件。 Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.
已弃用 sortButtonLabel: (id: string) => { return `Change sorting for ${id}`; }	排序按钮的 ARIA 标签。 ARIA label for the sorting button.

changes: Subject<void>

只要这里的标签发生了变化就会发出流。如果标签在初始化后发生了变化，就用它来通知组件。

Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.

已弃用

sortButtonLabel: (id: string) => { return `Change sorting for ${id}`; }

排序按钮的 ARIA 标签。

ARIA label for the sorting button.

指令

`MatSortHeader`

对元素应用排序行为（点击以改变排序）和样式，包括一个显示当前排序方向的箭头。

Applies sorting behavior (click to change sort) and styles to an element, including an arrow to display the current sort direction.

必须提供一个 id 并将其包含在父 MatSort 指令中。

Must be provided with an id and contained within a parent MatSort directive.

如果在 CdkTable 的头单元格中使用它，它会自动默认包含列的定义。

If used on header cells in a CdkTable, it will automatically default its id from its containing column definition.

选择器： [mat-sort-header]

导出为： matSortHeader

属性

名称	描述
@Input() `arrowPosition: 'before' \| 'after'`	设置排序后显示的箭头位置。 Sets the position of the arrow that displays when sorted.
@Input() `disableClear: boolean`	为这个 MatSortable 改写包含其中的 MatSort 的 disableClear 值。 Overrides the disable clear value of the containing MatSort for this MatSortable.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input('mat-sort-header') `id: string`	此排序头的 ID。如果在 CdkColumnDef 的上下文中使用，则默认为该列的名字。 ID of this sort header. If used within the context of a CdkColumnDef, this will default to the column's name.
@Input() `start: 'asc' \| 'desc'`	改写这个 MatSortable 中包含 MatSort 的 sort 起始值。 Overrides the sort start value of the containing MatSort for this MatSortable.

`MatSort`

MatSortable 的容器，可以管理排序状态并提供默认的排序参数。

Container for MatSortables to manage the sort state and provide default sort parameters.

选择器： [matSort]

导出为： matSort

属性

名称	描述
@Input('matSortActive') `active: string`	最近排序过的 MatSortable 的 id。 The id of the most recently sorted MatSortable.
@Input('matSortDirection') `direction: SortDirection`	当前活动的 MatSortable 的排序方向。 The sort direction of the currently active MatSortable.
@Input('matSortDisableClear') `disableClear: boolean`	是否通过完成排序方向的循环来禁止用户清除排序。可以通过 MatSortable 的输入属性 disableClear 来改写它。 Whether to disable the user from clearing the sort by finishing the sort direction cycle. May be overriden by the MatSortable's disable clear input.
@Input( matSortDisabled) `disabled: boolean`	Whether the component is disabled.
@Input('matSortStart') `start: 'asc' \| 'desc'`	最初对 MatSortable 进行排序时要设置的方向。可以通过 MatSortable 的输入属性 start 来改写它。 The direction to set when an MatSortable is initially sorted. May be overriden by the MatSortable's sort start.
@Output('matSortChange') `sortChange: EventEmitter<Sort>`	当用户改变活动的排序或排序方向时发出的事件。 Event emitted when the user changes either the active sort or sort direction.
`initialized: Observable<void>`	Stream that emits once during the directive/component's ngOnInit.
`sortables: Map<string, MatSortable>`	本指令管理的所有已注册可排序对象的集合。 Collection of all registered sortables that this directive manages.

方法

deregister

deregister
取消注册 MatSortable 的函数。这会从 MatSortable 集合中删除此 MatSortable。 Unregister function to be used by the contained MatSortables. Removes the MatSortable from the collection of contained MatSortables.
sortable `MatSortable`

取消注册 MatSortable 的函数。这会从 MatSortable 集合中删除此 MatSortable。

Unregister function to be used by the contained MatSortables. Removes the MatSortable from the collection of contained MatSortables.

参数

Parameters

sortable

MatSortable

getNextSortDirection
返回活动可排序对象的下一个排序方向，检查潜在的改写。 Returns the next sort direction of the active sortable, checking for potential overrides.
参数 Parameters
sortable `MatSortable`
返回值 Returns
`SortDirection`

register
注册 MatSortable 的函数。这会把此 MatSortable 添加到 MatSortable 的集合中的。 Register function to be used by the contained MatSortables. Adds the MatSortable to the collection of MatSortables.
sortable `MatSortable`

参数

Parameters

sortable

MatSortable

sort

sort
设置当前排序的 id，并确定新的排序方向。 Sets the active sort id and determines the new sort direction.
sortable `MatSortable`

设置当前排序的 id，并确定新的排序方向。

Sets the active sort id and determines the new sort direction.

参数

Parameters

sortable

MatSortable

接口

`MatSortable`

指令的接口，用于保存供 MatSortHeader 使用的排序状态。

Interface for a directive that holds sorting state consumed by MatSortHeader.

属性

名称描述

名称	描述
`disableClear: boolean`	是否禁止清除排序状态。 Whether to disable clearing the sorting state.
`id: string`	要被排序的列的 id。 The id of the column being sorted.
`start: 'asc' \| 'desc'`	开始排序的方向。 Starting sort direction.

disableClear: boolean

是否禁止清除排序状态。

Whether to disable clearing the sorting state.

id: string

要被排序的列的 id。

The id of the column being sorted.

start: 'asc' | 'desc'

开始排序的方向。

Starting sort direction.

`Sort`

当前的排序状态。

The current sort state.

属性

名称描述

名称	描述
`active: string`	要被排序的列的 id。 The id of the column being sorted.
`direction: SortDirection`	排序的方向。 The sort direction.

active: string

要被排序的列的 id。

The id of the column being sorted.

direction: SortDirection

排序的方向。

The sort direction.

类型别名

`SortDirection`

type SortDirection = 'asc' | 'desc' | '';

Angular Material sort-testing API 参考文档

import {MatSortHarness} from '@angular/material/sort/testing';

类

`MatSortHarness` extends ComponentHarness

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

方法

异步 getActiveHeader
Gets the selected header in the `mat-sort`.
`Promise<MatSortHeaderHarness \| null>`

异步

getActiveHeader

Gets the selected header in the mat-sort.

返回值

Returns

Promise<MatSortHeaderHarness | null>

异步 getSortHeaders
Gets all of the sort headers in the `mat-sort`.
参数 Parameters
filter `SortHeaderHarnessFilters = {}`
返回值 Returns
`Promise<MatSortHeaderHarness[]>`

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

`MatSortHeaderHarness` extends ComponentHarness

Harness for interacting with a standard Angular Material sort header in tests.

方法

异步 click
Clicks the header to change its sorting direction. Only works if the header is enabled.
`Promise<void>`	Promise that resolves when the action completes.

异步

click

Clicks the header to change its sorting direction. Only works if the header is enabled.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 getLabel
Gets the label of the sort header.
`Promise<string>`

异步

getLabel

Gets the label of the sort header.

返回值

Returns

Promise<string>

异步 getSortDirection
Gets the sorting direction of the header.
`Promise<SortDirection>`

异步

getSortDirection

Gets the sorting direction of the header.

返回值

Returns

Promise<SortDirection>

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

异步 isActive
Gets whether the sort header is currently being sorted by.
`Promise<boolean>`

异步

isActive

Gets whether the sort header is currently being sorted by.

返回值

Returns

Promise<boolean>

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

异步

isDisabled

Whether the sort header is disabled.

返回值

Returns

Promise<boolean>

已弃用异步 getAriaLabel
Gets the aria-label of the sort header.
`Promise<string \| null>`

已弃用

异步

getAriaLabel

Gets the aria-label of the sort header.

返回值

Returns

Promise<string | null>

接口

`SortHarnessFilters`

`SortHeaderHarnessFilters`

属性

名称	描述
`label: string \| RegExp`
`sortDirection: SortDirection`

排序头 API 目录

Testing

Angular Material sort API 参考文档

link 服务

link MatSortHeaderIntl

属性

link 指令

link MatSortHeader

属性

link MatSort

属性

方法

link 接口

link MatSortable

属性

link Sort

属性

link 类型别名

link SortDirection

Angular Material sort-testing API 参考文档

link 类

link MatSortHarness extends ComponentHarness

方法

link MatSortHeaderHarness extends ComponentHarness

方法

link 接口

link SortHarnessFilters

link SortHeaderHarnessFilters

属性

服务

`MatSortHeaderIntl`

指令

`MatSortHeader`

`MatSort`

接口

`MatSortable`

`Sort`

类型别名

`SortDirection`

类

`MatSortHarness` extends ComponentHarness

`MatSortHeaderHarness` extends ComponentHarness

接口

`SortHarnessFilters`

`SortHeaderHarnessFilters`