在Angular组件内部修改输入信号值

问题描述

在Angular中使用信号(Signals)时，开发者尝试在组件内部修改input()信号的值，例如：

selected = input(false);

// 尝试在组件内部修改值（无效操作）
this.selected.set(true);

但上述操作无法成功，因为Angular的input()信号是只读的。根据Angular信号机制的设计原则：

核心限制

输入信号(input())专门用于接收来自父组件的数据，无法在接收组件内部被修改。这种设计保证了数据流的单向性和可预测性。

解决方案分析

当需要在组件内部修改输入值时，应使用Angular 17.2引入的model()功能：

::: tip 替代方案：使用双向绑定模型

1. model()取代传统的@Input()+@Output()组合
2. model()返回可写信号(Writable Signal)
3. 天然支持父组件和子组件间的双向数据同步 :::

使用model()的正确方式：

// 子组件代码
import { Component, model } from '@angular/core';

@Component({
  selector: 'app-toggle',
  template: `<button (click)="toggle()">{{ value() ? 'ON' : 'OFF' }}</button>`
})
export class ToggleComponent {
  value = model<boolean>(false); // 声明可写模型信号
  
  toggle(): void {
    this.value.update(current => !current); // 内部更新值
  }
}

// 父组件模板
<app-toggle [(value)]="isActive" />

关键区别说明

特性	input()	model()
可写性	只读 (Read-only)	可写 (Writable)
绑定方式	单向绑定 [prop]="value"	双向绑定 [(prop)]="value"
适用场景	父→子数据传递	父子双向数据同步
是否需要事件发射器	不需要	自动生成对应输出事件

实际应用示例

计数器组件案例

// counter.component.ts
import { Component, model } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="decrement()">-</button>
    {{ count() }}
    <button (click)="increment()">+</button>
  `
})
export class CounterComponent {
  count = model(0);

  increment(): void {
    this.count.update(current => current + 1);
  }

  decrement(): void {
    this.count.update(current => current > 0 ? current - 1 : 0);
  }
}

<!-- 父组件模板 -->
<app-counter [(count)]="quantity" />

技术原理:

1. model(initialValue)隐式创建：
   • 一个输入属性 (count)
   • 一个输出事件 (countChange)
2. 当组件内部修改count时：

进阶使用技巧

转换输入值

// 将字符串输入转为数字
amount = input(0, { transform: (v: string) => Number(v) });

必需输入值

// 强制父组件必须提供该输入
title = input.required<string>();

与计算信号集成

// 基于模型值计算衍生状态
discountPrice = computed(() => this.price() * 0.9);

迁移注意事项

从传统@Input/@Output迁移到信号时：

1. 若组件需要内部修改值 → 使用model()
2. 若仅接收父组件值 → 使用input()
3. 对于复杂转换逻辑，使用computed()派生新值

通过正确选择input()和model()，开发者可以在保证Angular单向数据流优点的同时，满足组件内部状态维护的需求。model()的引入大幅简化了实现父子组件双向通信的复杂度，是现代化Angular开发的推荐模式。