Angular Material

Angular Material radio API 参考文档

import {MatRadioModule} from '@angular/material/radio';

指令

`MatRadioGroup`

一组单选按钮。可以包含一个或多个 <mat-radio-button> 元素。

A group of radio buttons. May contain one or more <mat-radio-button> elements.

选择器： mat-radio-group

导出为： matRadioGroup

属性

名称	描述
@Input() `color: ThemePalette`	该组中所有单选按钮的主题颜色。 Theme color for all of the radio buttons in the group.
@Input() `disabled: boolean`	单选按钮组是否被禁用 Whether the radio group is disabled
@Input() `labelPosition: 'before' \| 'after'`	标签是应该出现在单选按钮之后还是之前。默认为 'after' Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
@Input() `name: string`	单选按钮组的名称。该组中的所有单选按钮都将使用此名称。 Name of the radio button group. All radio buttons inside this group will use this name.
@Input() `required: boolean`	单选按钮组是否为必填项 Whether the radio group is required
@Input() `selected: T`	当前选定的单选按钮。如果设置为新的单选按钮，则会更新该单选按钮组的值以匹配新选定的按钮。 The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new selected button.
@Input() `value: any`	单选按钮组的值。如果有一个与匹配值对应的单选按钮，它应该等于选定单选按钮的值。如果没有这样一个对应的单选按钮，在加入了一个带有匹配值的新单选按钮，该值仍然会生效。 Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding radio button with a matching value. If there is not such a corresponding radio button, this value persists to be applied in case a new radio button is added with a matching value.
@Output() `change: EventEmitter<MatRadioChange>`	本组的值发生变化时发出的事件。只有在值是因用户与单选按钮的交互而发生变化时才会发出变更事件（与 `<input type-"radio">` 的行为相同）。 Event emitted when the group value changes. Change events are only emitted when the value changes due to user interaction with a radio button (the same behavior as `<input type-"radio">`).

`MatRadioButton`

Material Design 单选按钮。通常放在 <mat-radio-group> 元素内。

A Material design radio-button. Typically placed inside of <mat-radio-group> elements.

选择器： mat-radio-button

导出为： matRadioButton

属性

名称	描述
@Input('aria-describedby') `ariaDescribedby: string`	'aria-describedby' 属性是在该元素的标签和字段类型之后读取的。 The 'aria-describedby' attribute is read after the element's label and field type.
@Input('aria-label') `ariaLabel: string`	用来在底层的 input 元素上设置 'aria-label' 属性。 Used to set the 'aria-label' attribute on the underlying input element.
@Input('aria-labelledby') `ariaLabelledby: string`	'aria-labelledby' 属性优先于该元素上的替换文本。 The 'aria-labelledby' attribute takes precedence as the element's text alternative.
@Input() `checked: boolean`	这个单选按钮是否被勾选。 Whether this radio button is checked.
@Input() `color: ThemePalette`	单选按钮的主题颜色。 Theme color of the radio button.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	单选按钮是否被禁用。 Whether the radio button is disabled.
@Input() `id: string`	单选按钮的唯一 ID。 The unique ID for the radio button.
@Input() `labelPosition: 'before' \| 'after'`	标签是应该出现在单选按钮之后还是之前。默认为 'after' Whether the label should appear after or before the radio button. Defaults to 'after'
@Input() `name: string`	模拟 HTML 的 “name” 属性，用于对单选按钮进行分组以进行唯一选择。 Analog to HTML 'name' attribute used to group radios for unique selection.
@Input() `required: boolean`	单选按钮是否为必填项。 Whether the radio button is required.
@Input() `value: any`	这个单选按钮的值。 The value of this radio button.
@Output() `change: EventEmitter<MatRadioChange>`	该单选按钮的 checked 属性发生变化时，会发出本事件。只会在值因用户与单选按钮的交互而发生变化时发出此变更事件（与 `<input type-"radio">` 的行为相同）。 Event emitted when the checked state of this radio button changes. Change events are only emitted when the value changes due to user interaction with the radio button (the same behavior as `<input type-"radio">`).
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.
`inputId: string`	`<mat-radio-button>` 里面的原生输入框元素的 ID ID of the native input element inside `<mat-radio-button>`
`radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>`	父单选按钮组。可能存在，也可能不存在。 The parent radio group. May or may not be present.

方法

focus
让此单选按钮获得焦点。 Focuses the radio button.
参数 Parameters
options? `FocusOptions`
origin? `FocusOrigin`

类

`MatRadioChange`

由 MatRadio 和 MatRadioGroup 发出的变更事件对象。

Change event object emitted by MatRadio and MatRadioGroup.

属性

名称	描述
`source: _MatRadioButtonBase`	The MatRadioButton that emits the change event.
`value: any`	The value of the MatRadioButton.

接口

`MatRadioDefaultOptions`

属性

名称	描述
`color: ThemePalette`

函数

MAT_RADIO_DEFAULT_OPTIONS_FACTORY

MAT_RADIO_DEFAULT_OPTIONS_FACTORY
`MatRadioDefaultOptions`

返回值

Returns

MatRadioDefaultOptions

常量

`MAT_RADIO_DEFAULT_OPTIONS`

const MAT_RADIO_DEFAULT_OPTIONS: InjectionToken<MatRadioDefaultOptions>;

`MAT_RADIO_GROUP`

这个注入令牌可以用来注入 MatRadioGroup 实例。它可以作为实际 MatRadioGroup 类的备用令牌，如果使用真实类可能导致此类及其组件元数据无法优化掉。

Injection token that can be used to inject instances of MatRadioGroup. It serves as alternative token to the actual MatRadioGroup class which could cause unnecessary retention of the class and its component metadata.

const MAT_RADIO_GROUP: InjectionToken<_MatRadioGroupBase<_MatRadioButtonBase>>;

Angular Material radio-testing API 参考文档

import {MatRadioGroupHarness} from '@angular/material/radio/testing';

类

`MatRadioGroupHarness`

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

Harness for interacting with a standard mat-radio-group in tests.

方法

异步 checkRadioButton
Checks a radio button in this group. @param filter An optional filter to apply to the child radio buttons. The first tab matching the filter will be selected.
参数 Parameters
filter? `ButtonFilters`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

异步 getCheckedRadioButton
Gets the checked radio-button in a radio-group.
`Promise<Button \| null>`

异步

getCheckedRadioButton

Gets the checked radio-button in a radio-group.

返回值

Returns

Promise<Button | null>

异步 getCheckedValue
Gets the checked value of the radio-group.
`Promise<string \| null>`

异步

getCheckedValue

Gets the checked value of the radio-group.

返回值

Returns

Promise<string | null>

异步 getId
Gets the id of the radio-group.
`Promise<string \| null>`

异步

getId

Gets the id of the radio-group.

返回值

Returns

Promise<string | null>

异步 getName
Gets the name of the radio-group.
`Promise<string \| null>`

异步

getName

Gets the name of the radio-group.

返回值

Returns

Promise<string | null>

异步 getRadioButtons
Gets a list of radio buttons which are part of the radio-group. @param filter Optionally filters which radio buttons are included.
参数 Parameters
filter? `ButtonFilters`
返回值 Returns
`Promise<Button[]>`

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

`MatRadioButtonHarness`

Harness for interacting with a standard mat-radio-button in tests.

方法

异步 blur
Blurs the radio-button.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

Blurs the radio-button.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 check
Puts the radio-button in a checked state by clicking it if it is currently unchecked, or doing nothing if it is already checked.
`Promise<void>`	Promise that resolves when the action completes.

异步

check

Puts the radio-button in a checked state by clicking it if it is currently unchecked, or doing nothing if it is already checked.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 focus
Focuses the radio-button.
`Promise<void>`	Promise that resolves when the action completes.

异步

focus

Focuses the radio-button.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 getId
Gets the radio-button's id.
`Promise<string \| null>`

异步

getId

Gets the radio-button's id.

返回值

Returns

Promise<string | null>

异步 getLabelText
Gets the radio-button's label text.
`Promise<string>`

异步

getLabelText

Gets the radio-button's label text.

返回值

Returns

Promise<string>

异步 getName
Gets the radio-button's name.
`Promise<string \| null>`

异步

getName

Gets the radio-button's name.

返回值

Returns

Promise<string | null>

异步 getValue
Gets the value of the radio-button. The radio-button value will be converted to a string. Note: This means that for radio-button's with an object as a value `[object Object]` is intentionally returned.
`Promise<string \| null>`

异步

getValue

Gets the value of the radio-button. The radio-button value will be converted to a string.

Note: This means that for radio-button's with an object as a value [object Object] is intentionally returned.

返回值

Returns

Promise<string | null>

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

异步 isChecked
Whether the radio-button is checked.
`Promise<boolean>`

异步

isChecked

Whether the radio-button is checked.

返回值

Returns

Promise<boolean>

异步 isDisabled
Whether the radio-button is disabled.
`Promise<boolean>`

异步

isDisabled

Whether the radio-button is disabled.

返回值

Returns

Promise<boolean>

异步 isFocused
Whether the radio-button is focused.
`Promise<boolean>`

异步

isFocused

Whether the radio-button is focused.

返回值

Returns

Promise<boolean>

异步 isRequired
Whether the radio-button is required.
`Promise<boolean>`

异步

isRequired

Whether the radio-button is required.

返回值

Returns

Promise<boolean>

接口

`RadioGroupHarnessFilters`

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

属性

名称描述

名称	描述
`name: string`	只查找 name 属性为指定值的实例。 Only find instances whose name attribute is the given value.

name: string

只查找 name 属性为指定值的实例。

Only find instances whose name attribute is the given value.

`RadioButtonHarnessFilters`

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

属性

名称描述

名称	描述
`label: string \| RegExp`	只查找标签与指定值匹配的实例。 Only find instances whose label matches the given value.
`name: string`	只查找 name 属性为指定值的实例。 Only find instances whose name attribute is the given value.

label: string | RegExp

只查找标签与指定值匹配的实例。

Only find instances whose label matches the given value.

name: string

只查找 name 属性为指定值的实例。

Only find instances whose name attribute is the given value.

单选按钮 API 目录

Testing

Angular Material radio API 参考文档

link 指令

link MatRadioGroup

属性

link MatRadioButton

属性

方法

link 类

link MatRadioChange

属性

link 接口

link MatRadioDefaultOptions

属性

link 函数

link 常量

link MAT_RADIO_DEFAULT_OPTIONS

link MAT_RADIO_GROUP

Angular Material radio-testing API 参考文档

link 类

link MatRadioGroupHarness

方法

link MatRadioButtonHarness

方法

link 接口

link RadioGroupHarnessFilters

属性

link RadioButtonHarnessFilters

属性

指令

`MatRadioGroup`

`MatRadioButton`

类

`MatRadioChange`

接口

`MatRadioDefaultOptions`

函数

常量

`MAT_RADIO_DEFAULT_OPTIONS`

`MAT_RADIO_GROUP`

类

`MatRadioGroupHarness`

`MatRadioButtonHarness`

接口

`RadioGroupHarnessFilters`

`RadioButtonHarnessFilters`