Angular开发：signal()与model()的适用场景辨析

Angular官方文档指出：

ModelSignal是一种WritableSignal，意味着可通过set和update方法在任意位置修改其值。当赋值新值时，ModelSignal会向其输出发送事件。这与只读的InputSignal不同，后者仅能通过模板修改。

我感觉ModelSignal和WritableSignal没什么差异，唯一区别是前者写入时会触发变更事件？但WritableSignal调用set()或update()时不也会触发变更事件吗？

以下是两个示例，分别使用signal()和model()，两者均能正常运行。请问在我的场景下，哪种方式更合适？

使用signal()的示例 #

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
  <input type="text"
        [(ngModel)]="quantity"/>

        {{quantity()}}
  `,
})
export class App {
  name = 'Angular';
  quantity = signal<number>(1);
}

bootstrapApplication(App);

使用model()的示例 #

import { Component, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
  <input type="text"
        [(ngModel)]="quantity"/>

        {{quantity()}}
  `,
})
export class App {
  name = 'Angular';
  quantity = model<number>(1);
}

bootstrapApplication(App);

场景适配分析 #

1. 核心差异本质

• signal()创建的WritableSignal是组件内部状态的基础载体，仅负责向Angular变更检测系统发送状态变更通知，语义上代表「组件私有状态」，用于纯内部的状态管理。
• model()创建的ModelSignal是带输出事件能力的WritableSignal，除了内部状态变更通知外，还会向外触发值变更事件，语义上代表「可对外同步的状态」，是为组件间双向绑定设计的语法糖。

2. 你的场景选择
   你的示例仅在组件内部用[(ngModel)]做本地状态绑定，没有涉及组件间的状态同步，此时用**signal()更合适**。因为model()的额外输出事件能力在这个场景下完全冗余，用signal()更贴合「内部私有状态」的语义，也更轻量化。

3. 何时选择model()
   当你需要实现组件间双向绑定时，model()是最优选择：

• 比如自定义表单组件，子组件用model()定义可双向绑定的属性，父组件可以直接通过[(xxx)]语法和子组件同步状态，无需手动编写@Input()+@Output()的组合代码，实现更简洁。

内容的提问来源于stack exchange，提问作者O S