Angular Material

Angular Material stepper API 参考文档

import {MatStepperModule} from '@angular/material/stepper';

服务

`MatStepperIntl`

国际化所需的步进器数据。

Stepper data that is required for internationalization.

属性

名称描述

名称	描述
`changes: Subject<void>`	只要这里的标签发生了变化就会发出流。如果标签在初始化后发生了变化，用它来通知组件。 Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.
`optionalLabel: string`	在可选步骤下要渲染的标签。 Label that is rendered below optional steps.

changes: Subject<void>

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

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

optionalLabel: string

在可选步骤下要渲染的标签。

Label that is rendered below optional steps.

指令

`MatStepLabel` extends CdkStepLabel

选择器： [matStepLabel]

`MatStep` extends CdkStep

选择器： mat-step

导出为： matStep

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	选项卡的 Aria 标签。 Aria label for the tab.
@Input('aria-labelledby') `ariaLabelledby: string`	到用来标注此选项卡的元素的引用。如果同时设置了 `aria-label`，则被清除。 Reference to the element that the tab is labelled by. Will be cleared if `aria-label` is set at the same time.
@Input() `color: ThemePalette`	特定步骤的主题颜色。 Theme color for the particular step.
@Input() `completed: boolean`	步骤是否标记为已完成。 Whether step is marked as completed.
@Input() `editable: boolean`	一旦标记为已完成，用户是否可以返回此步骤。 Whether the user can return to this step once it has been marked as completed.
@Input() `errorMessage: string`	当出现错误时显示的错误信息。 Error message to display when there's an error.
@Input() `hasError: boolean`	步骤是否有错误。 Whether step has an error.
@Input() `label: string`	该步骤的纯文本标签。 Plain text label of the step.
@Input() `optional: boolean`	是否可以不必完成此步骤。 Whether the completion of step is optional.
@Input() `state: StepState`	步骤的状态。 State of the step.
@Input() `stepControl: AbstractControlLike`	该步骤的顶级抽象控件。 The top level abstract control of the step.
`content: TemplateRef<any>`	步骤内容的模板。 Template for step content.
`interacted: false`	用户是否看过展开后的步骤内容。 Whether user has seen the expanded step content or not.
`stepLabel: MatStepLabel`	步骤标签的内容，由 `<ng-template matStepLabel>` 提供。 Content for step label given by `<ng-template matStepLabel>`.

方法

isErrorState
自定义错误状态匹配器，它还要检查交互式表单的有效性。 Custom error state matcher that additionally checks for validity of interacted form.
参数 Parameters
control `FormControl`
form `NgForm \| FormGroupDirective`
返回值 Returns
`boolean`

reset
把步骤重置为初始状态。请注意，这也包括重置表单数据。 Resets the step to its initial state. Note that this includes resetting form data.

reset

把步骤重置为初始状态。请注意，这也包括重置表单数据。

Resets the step to its initial state. Note that this includes resetting form data.

select
选择此步骤组件。 Selects this step component.

select

选择此步骤组件。

Selects this step component.

`MatStepper` extends CdkStepper

选择器： [matStepper]

属性

名称	描述
@Input() `color: ThemePalette`	步进器中所有步骤的主题颜色。 Theme color for all of the steps in stepper.
@Input() `disableRipple: boolean`	是否应为步骤头禁用涟漪。 Whether ripples should be disabled for the step headers.
@Input() `linear: boolean`	是否检查前一个步骤的有效性。 Whether the validity of previous steps should be checked or not.
@Input() `selected: CdkStep`	选定的步骤 The step that is selected.
@Input() `selectedIndex: number`	选定步骤的索引。 The index of the selected step.
@Output() `animationDone: EventEmitter<void>`	转换到当前步骤完毕后发出的事件。 Event emitted when the current step is done transitioning in.
@Output() `selectionChange: EventEmitter<StepperSelectionEvent>`	选定的步骤发生变化时发出的事件。 Event emitted when the selected step has changed.
`steps: QueryList<MatStep>`	属于当前步进器的步骤（不包括那些来自嵌套步进器的步骤）。 Steps that belong to the current stepper, excluding ones from nested steppers.

方法

next
选择并让列表中的下一步获得焦点。 Selects and focuses the next step in list.

选择并让列表中的下一步获得焦点。

Selects and focuses the next step in list.

previous
选择并让列表中的上一步获得焦点。 Selects and focuses the previous step in list.

选择并让列表中的上一步获得焦点。

Selects and focuses the previous step in list.

reset
步进器的初始状态是 1。请注意，这包括清除表单数据。 Resets the stepper to its initial state. Note that this includes clearing form data.

reset

步进器的初始状态是 1。请注意，这包括清除表单数据。

Resets the stepper to its initial state. Note that this includes clearing form data.

`MatHorizontalStepper` extends MatStepper

选择器： mat-horizontal-stepper

导出为： matHorizontalStepper

属性

名称	描述
@Input() `color: ThemePalette`	步进器中所有步骤的主题颜色。 Theme color for all of the steps in stepper.
@Input() `disableRipple: boolean`	是否应为步骤头禁用涟漪。 Whether ripples should be disabled for the step headers.
@Input() `labelPosition: 'bottom' \| 'end'`	标签是显示在底部还是末尾。 Whether the label should display in bottom or end position.
@Input() `linear: boolean`	是否检查前一个步骤的有效性。 Whether the validity of previous steps should be checked or not.
@Input() `selected: CdkStep`	选定的步骤 The step that is selected.
@Input() `selectedIndex: number`	选定步骤的索引。 The index of the selected step.
@Output() `animationDone: EventEmitter<void>`	转换到当前步骤完毕后发出的事件。 Event emitted when the current step is done transitioning in.
@Output() `selectionChange: EventEmitter<StepperSelectionEvent>`	选定的步骤发生变化时发出的事件。 Event emitted when the selected step has changed.
`steps: QueryList<MatStep>`	属于当前步进器的步骤（不包括那些来自嵌套步进器的步骤）。 Steps that belong to the current stepper, excluding ones from nested steppers.

方法

next
选择并让列表中的下一步获得焦点。 Selects and focuses the next step in list.

选择并让列表中的下一步获得焦点。

Selects and focuses the next step in list.

previous
选择并让列表中的上一步获得焦点。 Selects and focuses the previous step in list.

选择并让列表中的上一步获得焦点。

Selects and focuses the previous step in list.

reset
步进器的初始状态是 1。请注意，这包括清除表单数据。 Resets the stepper to its initial state. Note that this includes clearing form data.

reset

步进器的初始状态是 1。请注意，这包括清除表单数据。

Resets the stepper to its initial state. Note that this includes clearing form data.

`MatVerticalStepper` extends MatStepper

选择器： mat-vertical-stepper

导出为： matVerticalStepper

属性

名称	描述
@Input() `color: ThemePalette`	步进器中所有步骤的主题颜色。 Theme color for all of the steps in stepper.
@Input() `disableRipple: boolean`	是否应为步骤头禁用涟漪。 Whether ripples should be disabled for the step headers.
@Input() `linear: boolean`	是否检查前一个步骤的有效性。 Whether the validity of previous steps should be checked or not.
@Input() `selected: CdkStep`	选定的步骤 The step that is selected.
@Input() `selectedIndex: number`	选定步骤的索引。 The index of the selected step.
@Output() `animationDone: EventEmitter<void>`	转换到当前步骤完毕后发出的事件。 Event emitted when the current step is done transitioning in.
@Output() `selectionChange: EventEmitter<StepperSelectionEvent>`	选定的步骤发生变化时发出的事件。 Event emitted when the selected step has changed.
`steps: QueryList<MatStep>`	属于当前步进器的步骤（不包括那些来自嵌套步进器的步骤）。 Steps that belong to the current stepper, excluding ones from nested steppers.

方法

next
选择并让列表中的下一步获得焦点。 Selects and focuses the next step in list.

选择并让列表中的下一步获得焦点。

Selects and focuses the next step in list.

previous
选择并让列表中的上一步获得焦点。 Selects and focuses the previous step in list.

选择并让列表中的上一步获得焦点。

Selects and focuses the previous step in list.

reset
步进器的初始状态是 1。请注意，这包括清除表单数据。 Resets the stepper to its initial state. Note that this includes clearing form data.

reset

步进器的初始状态是 1。请注意，这包括清除表单数据。

Resets the stepper to its initial state. Note that this includes clearing form data.

`MatStepperNext` extends CdkStepperNext

用来移动到步进器工作流下一步的按钮。

Button that moves to the next step in a stepper workflow.

选择器： button[matStepperNext]

属性

名称描述

名称	描述
@Input() `type: string`	下一个按钮的类型如果没有指定，默认为 “submit”。 Type of the next button. Defaults to "submit" if not specified.

@Input()

type: string

下一个按钮的类型如果没有指定，默认为 “submit”。

Type of the next button. Defaults to "submit" if not specified.

`MatStepperPrevious` extends CdkStepperPrevious

用来移动到步进器工作流中上一步的按钮。

Button that moves to the previous step in a stepper workflow.

选择器： button[matStepperPrevious]

属性

名称描述

名称	描述
@Input() `type: string`	上一个按钮的类型如果没有指定，默认为 “button”。 Type of the previous button. Defaults to "button" if not specified.

@Input()

type: string

上一个按钮的类型如果没有指定，默认为 “button”。

Type of the previous button. Defaults to "button" if not specified.

`MatStepHeader`

选择器： mat-step-header

属性

名称	描述
@Input() `active: boolean`	指定的步骤标签是否有效。 Whether the given step label is active.
@Input() `color: ThemePalette`	Theme color palette for the component.
@Input() `disableRipple: boolean`	是否应该禁用涟漪。 Whether the ripple should be disabled.
@Input() `errorMessage: string`	当出现错误时显示错误信息。 Error message to display when there's an error.
@Input() `iconOverrides: { [key: string]: TemplateRef<MatStepperIconContext>; }`	改写那些通过步进器传入的头部图标。 Overrides for the header icons, passed in via the stepper.
@Input() `index: number`	指定步骤的索引。 Index of the given step.
@Input() `label: MatStepLabel \| string`	指定步骤的标签。 Label of the given step.
@Input() `optional: boolean`	指定的步骤是否可选。 Whether the given step is optional.
@Input() `selected: boolean`	指定的步骤是否已选定。 Whether the given step is selected.
@Input() `state: StepState`	指定步骤的状态 State of the given step.
`defaultColor: ThemePalette \| undefined`	Default color to fall back to if no value is set.

方法

focus
让步骤头获得焦点。 Focuses the step header.
参数 Parameters
origin? `FocusOrigin`
options? `FocusOptions`

`MatStepperIcon`

用来改写步骤头内部图标的模板。

Template to be used to override the icons inside the step header.

选择器： ng-template[matStepperIcon]

属性

名称描述

名称	描述
@Input('matStepperIcon') `name: StepState`	要改写的图标名称。 Name of the icon to be overridden.
`templateRef: TemplateRef<MatStepperIconContext>`

@Input('matStepperIcon')

name: StepState

要改写的图标名称。

Name of the icon to be overridden.

templateRef: TemplateRef<MatStepperIconContext>

接口

`MatStepperIconContext`

可用于附加的 matStepperIcon 的模板上下文。

Template context available to an attached matStepperIcon.

属性

名称描述

名称	描述
`active: boolean`	该步骤当前是否处于活动状态。 Whether the step is currently active.
`index: number`	步骤的索引。 Index of the step.
`optional: boolean`	该步骤是否可选。 Whether the step is optional.

active: boolean

该步骤当前是否处于活动状态。

Whether the step is currently active.

index: number

步骤的索引。

Index of the step.

optional: boolean

该步骤是否可选。

Whether the step is optional.

Angular Material stepper-testing API 参考文档

import {MatStepperHarness} from '@angular/material/stepper/testing';

类

`MatStepperHarness` extends ComponentHarness

在测试中与标准 Material stepper 进行交互的测试工具。

Harness for interacting with a standard Material stepper in tests.

方法

异步 getOrientation
Gets the orientation of the stepper.
`Promise<StepperOrientation>`

异步

getOrientation

Gets the orientation of the stepper.

返回值

Returns

Promise<StepperOrientation>

异步 getSteps
Gets the list of steps in the stepper.
参数 Parameters
filter `StepHarnessFilters = {}`	Optionally filters which steps are included.
返回值 Returns
`Promise<MatStepHarness[]>`

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

异步 selectStep
Selects a step in this stepper.
参数 Parameters
filter `StepHarnessFilters = {}`	An optional filter to apply to the child steps. The first step matching the filter will be selected.
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

`MatStepHarness` extends ContentContainerComponentHarness

Harness for interacting with a standard Angular Material step in tests.

方法

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

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

异步 getAriaLabel
Gets the `aria-label` of the step.
`Promise<string \| null>`

异步

getAriaLabel

Gets the aria-label of the step.

返回值

Returns

Promise<string | null>

异步 getAriaLabelledby
Gets the value of the `aria-labelledby` attribute.
`Promise<string \| null>`

异步

getAriaLabelledby

Gets the value of the aria-labelledby attribute.

返回值

Returns

Promise<string | null>

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

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

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

异步

getLabel

Gets the label of the step.

返回值

Returns

Promise<string>

异步 getRootHarnessLoader
`Promise<HarnessLoader>`

异步

getRootHarnessLoader

返回值

Returns

Promise<HarnessLoader>

异步 hasErrors
Whether the step is currently showing its error state. Note that this doesn't mean that there are or aren't any invalid form controls inside the step, but that the step is showing its error-specific styling which depends on there being invalid controls, as well as the `ErrorStateMatcher` determining that an error should be shown and that the `showErrors` option was enabled through the `STEPPER_GLOBAL_OPTIONS` injection token.
`Promise<boolean>`

异步

hasErrors

Whether the step is currently showing its error state. Note that this doesn't mean that there are or aren't any invalid form controls inside the step, but that the step is showing its error-specific styling which depends on there being invalid controls, as well as the ErrorStateMatcher determining that an error should be shown and that the showErrors option was enabled through the STEPPER_GLOBAL_OPTIONS injection token.

返回值

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>

异步 isCompleted
Whether the step has been filled out.
`Promise<boolean>`

异步

isCompleted

Whether the step has been filled out.

返回值

Returns

Promise<boolean>

异步 isOptional
该步骤是否可选。 Whether the step is optional.
`Promise<boolean>`

异步

isOptional

该步骤是否可选。

Whether the step is optional.

返回值

Returns

Promise<boolean>

异步 isSelected
Whether the step is selected.
`Promise<boolean>`

异步

isSelected

Whether the step is selected.

返回值

Returns

Promise<boolean>

异步 select
Selects the given step by clicking on the label. The step may not be selected if the stepper doesn't allow it (e.g. if there are validation errors).
`Promise<void>`	Promise that resolves when the action completes.

异步

select

Selects the given step by clicking on the label. The step may not be selected if the stepper doesn't allow it (e.g. if there are validation errors).

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

`MatStepperNextHarness`

Harness for interacting with a standard Angular Material stepper next button in tests.

方法

click

click
`Promise<void>`

返回值

Returns

Promise<void>

getText

getText
`Promise<string>`

返回值

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>

`MatStepperPreviousHarness`

Harness for interacting with a standard Angular Material stepper previous button in tests.

方法

click

click
`Promise<void>`

返回值

Returns

Promise<void>

getText

getText
`Promise<string>`

返回值

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>

接口

`StepHarnessFilters`

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

属性

名称	描述
`completed: boolean`	Only find completed steps.
`invalid: boolean`	Only find steps that have errors.
`label: string \| RegExp`	只查找标签与指定值匹配的实例。 Only find instances whose label matches the given value.
`selected: boolean`	Only find steps with the given selected state.

`StepperHarnessFilters`

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

属性

名称	描述
`orientation: StepperOrientation`	Only find instances whose orientation matches the given value.

`StepperButtonHarnessFilters`

A set of criteria that can be used to filter a list of MatStepperNextHarness and MatStepperPreviousHarness instances.

属性

名称描述

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

text: string | RegExp

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

Only find instances whose text matches the given value.

步进器 API 目录

Testing

Angular Material stepper API 参考文档

link 服务

link MatStepperIntl

属性

link 指令

link MatStepLabel extends CdkStepLabel

link MatStep extends CdkStep

属性

方法

link MatStepper extends CdkStepper

属性

方法

link MatHorizontalStepper extends MatStepper

属性

方法

link MatVerticalStepper extends MatStepper

属性

方法

link MatStepperNext extends CdkStepperNext

属性

link MatStepperPrevious extends CdkStepperPrevious

属性

link MatStepHeader

属性

方法

link MatStepperIcon

属性

link 接口

link MatStepperIconContext

属性

Angular Material stepper-testing API 参考文档

link 类

link MatStepperHarness extends ComponentHarness

方法

link MatStepHarness extends ContentContainerComponentHarness

方法

link MatStepperNextHarness

方法

link MatStepperPreviousHarness

方法

link 接口

link StepHarnessFilters

属性

link StepperHarnessFilters

属性

link StepperButtonHarnessFilters

属性

服务

`MatStepperIntl`

指令

`MatStepLabel` extends CdkStepLabel

`MatStep` extends CdkStep

`MatStepper` extends CdkStepper

`MatHorizontalStepper` extends MatStepper

`MatVerticalStepper` extends MatStepper

`MatStepperNext` extends CdkStepperNext

`MatStepperPrevious` extends CdkStepperPrevious

`MatStepHeader`

`MatStepperIcon`

接口

`MatStepperIconContext`

类

`MatStepperHarness` extends ComponentHarness

`MatStepHarness` extends ContentContainerComponentHarness

`MatStepperNextHarness`

`MatStepperPreviousHarness`

接口

`StepHarnessFilters`

`StepperHarnessFilters`

`StepperButtonHarnessFilters`