如何在单选按钮设置checked时触发click事件并初始化属性？

问题根源 #

页面加载时，checked属性仅负责渲染单选框的默认选中状态，不会主动触发click事件，所以绑定的color='red'不会执行，导致color属性始终未初始化。

可行解决方案 #

• 方案一：组件内直接初始化属性
  最简单直接的方式，定义color时直接赋值，和默认选中的单选框对应：

  // app.component.ts
  color!: string = 'red';
  

  页面加载后color就有初始值，和默认选中的单选框状态完全匹配。

• 方案二：使用Angular双向绑定（推荐）
  采用Angular表单的ngModel双向绑定，自动同步单选框选中值和组件属性，无需手动绑定click事件：

  // app.component.ts
  color!: string;
  

  模板修改为：

  <div>
    <input type="radio" name="colors" value="red" [(ngModel)]="color" checked>Red
    <input type="radio" name="colors" value="blue" [(ngModel)]="color">Blue
    <input type="radio" name="colors" value="green" [(ngModel)]="color">Green
  </div>
  

  注意：使用ngModel需要在对应模块中导入FormsModule。这种方式符合Angular表单规范，后续扩展表单逻辑更便捷。

• 方案三：通过生命周期钩子手动初始化
  在组件的ngOnInit钩子中手动给color赋值，对应默认选中的单选框：

  // app.component.ts
  import { OnInit } from '@angular/core';
  
  export class AppComponent implements OnInit {
    color!: string;
  
    ngOnInit(): void {
      this.color = 'red';
    }
  }
  

  这种方式适合需要在初始化阶段执行额外逻辑的场景。

内容的提问来源于stack exchange，提问作者Display Name