Angular组件内部修改Input Signal值失败，求正确实现方法

问题根源 #

input() 创建的是只读信号，它的值完全由父组件的绑定提供，组件内部没有权限直接修改——这是Angular为了维护单向数据流的设计限制，所以你尝试的两种写法都不会生效。

解决办法 #

1. 使用 model() 双向绑定信号（Angular 16+） #

如果你的Angular版本是16及以上，推荐用model()替代input()，它支持组件内部直接修改，同时自动同步给父组件：

// 组件内定义
selected = model(false);

// 直接修改值
this.selected.set(true);

父组件使用双向绑定语法即可同步状态：

<your-component [(selected)]="parentValue"></your-component>

2. Input + Output 组合（兼容旧版本） #

如果用的是低版本Angular，或者更倾向于传统单向数据流模式，通过Input接收值，Output触发事件通知父组件更新：

// 组件内定义
selected = input(false);
selectedChange = output<boolean>();

// 需要修改时触发事件
updateSelected() {
  this.selectedChange.emit(true);
}

父组件绑定方式：

<!-- 完整写法 -->
<your-component [selected]="parentValue" (selectedChange)="parentValue = $event"></your-component>

<!-- 简化双向绑定写法（符合Angular命名约定时可用） -->
<your-component [(selected)]="parentValue"></your-component>

内容的提问来源于stack exchange，提问作者Dživo Jelić