在角材料中

<mat-radio-button>是由Angular Material提供的一个组件，用于创建单选按钮。它非常适合创建表单，特别是当你需要在几个选项之间进行选择的时候。

安装

要使用 <mat-radio-button>，您需要首先安装@angular/material和@angular/cdk，运行以下命令：

npm install --save @angular/material @angular/cdk

然后要在你的工程中导入 MatRadioModule：

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

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

使用

下面是一个简单的示例，展示了如何使用<mat-radio-button>：

<mat-radio-group [(ngModel)]="selectedOption">
  <mat-radio-button *ngFor="let option of options" [value]="option">
    {{ option }}
  </mat-radio-button>
</mat-radio-group>

这个示例创建了一个包含几个选项的单选按钮组。ngModel指令用于从选择的选项中绑定选择结果到selectedOption变量中。

属性

<mat-radio-button>支持以下属性：

• color: 指定颜色，可选项为 primary, accent, 和 warn。
• value: 指定按钮的值。
• name: 指定按钮的名称。
• checked: 指定是否选中按钮。
• disabled: 指定是否禁用按钮。

事件

<mat-radio-button>触发以下事件：

• change: 当按钮的值更改时触发。

总结

<mat-radio-button>为Angular Material提供了一个简单、易用的单选按钮组件。无论您是要在表单中使用还是在其他地方使用，它都是理想的选择。现在你已经知道了如何使用它，你应该可以开始在你的应用程序中使用它了！