最近，我遇到了这一挑战...重构形式成分的角度信号。
旧形式组件的工作原理：
>
- 表单数据来自反应性状态服务
- 表单数据是 对象
- > 在将其传递给form component >之前，将其形式数据克隆到克隆之前
- 表单组件通过一个基于经典的装饰 angular @input 接收表单数据
-
@input({required: true}) user!: user;表格使用
- parent组件更新反应性状态服务
- 此设置在我们的许多应用程序中都非常有效。 >
的形式
重构以信号输入使用角信号输入，我们可以使组件输入反应性。这听起来很棒！
fyi信号输入是新项目的推荐方法。来自角文档：
>让我们对信号输入进行重构我们的经典angular @input：
user = input.required();
信号输入对象值和[（ngmodel）]
此代码看起来很不错！
>在此stackblitz中，一切似乎都起作用：具有信号输入的形式 - 突变信号状态
！这些危险区域：
>但是，等等...我们刚进入危险区...☢️☣️⚠️⚠️
实际发生了什么？
用户（）解开输入信号。我们掌握了原始的用户对象
这行代码[（ngmodel）] =“ user（）。firstname” will
stutate> untate
> use对象（包装到信号中），每当文本输入值更改>时
-
☢️突变信号对象☣️
-
>为什么突变信号状态是一个坏主意？因为我们绕过信号公共api以更新状态。通常，我们只应该使用专用方法设置或更新来更新信号状态。
其他开发人员可能希望使用angular计算的用户信号在用户信号之上构建其他信号。但是，计算的永远不会触发，因为用户信号不知道用户对象突变。这可能是一个令人惊讶的行为。
信号输入仅读取
是的，还有另一个原因，为什么在信号输入上使用[（ngmodel）]至少很奇怪。信号输入应该仅读取。他们没有集合或更新方法 - 因此，没有官方支持以编程方式更改信号输入状态。
>
救援
>让我们尝试尽可能快地逃脱。有什么可能的解决方案？
>
链接信号
>使用链接信号，我们可以创建一个可写的
用户信号，每当用户信号输入收到新值时，该信号会自动更新。同时，我们可以使用set和更新更新链接信号。
>
可典型的用户是我们的链接信号...
>
export class userdetailcomponent {
user = input.required();
editableuser = linkedsignal(() => this.user());
updateeditableuser(v: partial) {
this.editableuser.update(state => ({...state, ...v}))
}
}
>我们还引入了一种使用公共信号api更新信号状态的可更新的方法：在这种情况下，我们调用链接信号的更新方法。>
[（ngmodel）]已分为[ngmodel]和（ngmodelchange）>
[ngmodel] =“ decitableuser（）。firstname”将更新用户对象的firstname属性的文本输入
>每当文本输入值更改时，都将执行ngmodelchange回调（更新edediastenuser），并且将更新链接的信号
>
pros
我们使用公共信号api更新状态
我们使用链接的信号，这是一个可写信号-
状态变化以专用方法- 明确发生
不需要对象克隆
cons
- 有一些样板：链接信号设置，ngmodel，ngmodelchange，状态更新方法
>
目前，链接的信号仍在开发人员预览中（angular 19）
- stackblitz：带信号输入的形式 - 链接信号
-
影响
- 另一种方法是使用角效应来聆听信号输入的新值。
当我们从输入中收到新值时，我们将原始值分配给本地类属性。
export class userdetailcomponent {
_user = input.required({alias: 'user'});
user!: user;
constructor() {
effect(() => this.user = this._user())
}
}
在模板中，我们可以像往常一样突变原始对象。
pros
- 模板与我们原始的老式形式组件相同，该组件使用了经典的angular @input
- >我们正式突变一个原始对象（我们不绕过信号api，我们不会突变仅读取的信号输入态）。
>
cons
用户：必须初始化用户：用户：用户= new user（）;否则我们必须告诉typescript，用户始终定义用户！：用户；
需要克隆（带有结构性克隆管的父在父母中）>命名挑战：_user信号，“用户”别名，原始用户对象的用户属性
> stackblitz：具有信号输入的形式 - 效果
@let方法
使用@let，我们可以在模板中声明变量。
>让我们使用@let从用户信号输入中获取原始对象。此外，我们还可以使用结构性克隆管进行克隆。>
-
@let userclone = user() | structuredclone;
打字稿：-
export class UserDetailComponent {
user = input.required();
}
pros
>最小样板和最小的代码更改，比较老式（@input）表单组件-
@let是让魔术发生的单个地方（解开信号，克隆）>
-
cons -
>对象值是必需的，它不能与原始值一起使用。有关更多详细信息，请参见下面的注释
>。
stackblitz：带信号输入的形式 - @let
笔记
对象与原始值
>在上面的示例中，组件输入接收了一个对象值（用户对象）。
链接的信号和效果方法也将与使用原始值（字符串，布尔，数字...）的信号输入一起工作
>让我们看一下@let方法：
@let变量仅读取...这意味着我们无法将新值重新分配给@let变量。另外，不是通过[（ngmodel）]。如果我们尝试了，那么我们可以看到此编译错误：
>
- @let方法需要一个对象值，我们可以突变。
结论
-
“ @let方法”似乎是最直接的解决方案，最少的样板。
>效果和链接信号也是有效的选项，但需要更多的设置。
>
>我们仍在评估哪种方法最适合我们的应用程序，此blogpost应该帮助我们做出一个好的决定。- >
我希望您喜欢我们对突变信号状态的危险区域的短暂访问。您如何看待我的逃生策略？我相信还有更多选择。在评论中让我知道。>
谢谢！
！这些危险区域：
>但是，等等...我们刚进入危险区...☢️☣️⚠️⚠️
用户（）解开输入信号。我们掌握了原始的用户对象
这行代码[（ngmodel）] =“ user（）。firstname” will
stutate> untate
> use对象（包装到信号中），每当文本输入值更改- >时
- ☢️突变信号对象☣️
- >为什么突变信号状态是一个坏主意？因为我们绕过信号公共api以更新状态。通常，我们只应该使用专用方法设置或更新来更新信号状态。 其他开发人员可能希望使用angular计算的用户信号在用户信号之上构建其他信号。但是，计算的永远不会触发，因为用户信号不知道用户对象突变。这可能是一个令人惊讶的行为。 信号输入仅读取
是的，还有另一个原因，为什么在信号输入上使用[（ngmodel）]至少很奇怪。信号输入应该仅读取。他们没有集合或更新方法 - 因此，没有官方支持以编程方式更改信号输入状态。
>救援
>让我们尝试尽可能快地逃脱。有什么可能的解决方案？
>链接信号
>使用链接信号，我们可以创建一个可写的
用户信号，每当用户信号输入收到新值时，该信号会自动更新。同时，我们可以使用set和更新更新链接信号。
>可典型的用户是我们的链接信号...
>
export class userdetailcomponent {
user = input.required();
editableuser = linkedsignal(() => this.user());
updateeditableuser(v: partial) {
this.editableuser.update(state => ({...state, ...v}))
}
}
>我们还引入了一种使用公共信号api更新信号状态的可更新的方法：在这种情况下，我们调用链接信号的更新方法。
[（ngmodel）]已分为[ngmodel]和（ngmodelchange）
>每当文本输入值更改时，都将执行ngmodelchange回调（更新edediastenuser），并且将更新链接的信号
>
pros
我们使用公共信号api更新状态
- 我们使用链接的信号，这是一个可写信号
- 状态变化以专用方法
- 明确发生 不需要对象克隆
cons
- 有一些样板：链接信号设置，ngmodel，ngmodelchange，状态更新方法
> 目前，链接的信号仍在开发人员预览中（angular 19） - stackblitz：带信号输入的形式 - 链接信号
- 影响
- 另一种方法是使用角效应来聆听信号输入的新值。 当我们从输入中收到新值时，我们将原始值分配给本地类属性。
export class userdetailcomponent {
_user = input.required({alias: 'user'});
user!: user;
constructor() {
effect(() => this.user = this._user())
}
}
在模板中，我们可以像往常一样突变原始对象。
pros
- 模板与我们原始的老式形式组件相同，该组件使用了经典的angular @input
- >我们正式突变一个原始对象（我们不绕过信号api，我们不会突变仅读取的信号输入态）。 >
cons
用户：必须初始化用户：用户：用户= new user（）;否则我们必须告诉typescript，用户始终定义用户！：用户；
需要克隆（带有结构性克隆管的父在父母中）>命名挑战：_user信号，“用户”别名，原始用户对象的用户属性
@let方法
使用@let，我们可以在模板中声明变量。
- >让我们使用@let从用户信号输入中获取原始对象。此外，我们还可以使用结构性克隆管进行克隆。
-
@let userclone = user() | structuredclone;
打字稿：
export class UserDetailComponent {
user = input.required();
}
- >最小样板和最小的代码更改，比较老式（@input）表单组件
- @let是让魔术发生的单个地方（解开信号，克隆）
- cons
- >对象值是必需的，它不能与原始值一起使用。有关更多详细信息，请参见下面的注释
stackblitz：带信号输入的形式 - @let
笔记
对象与原始值
>让我们看一下@let方法：
@let变量仅读取...这意味着我们无法将新值重新分配给@let变量。另外，不是通过[（ngmodel）]。如果我们尝试了，那么我们可以看到此编译错误：
- @let方法需要一个对象值，我们可以突变。 结论
- “ @let方法”似乎是最直接的解决方案，最少的样板。
>效果和链接信号也是有效的选项，但需要更多的设置。
>- >我们仍在评估哪种方法最适合我们的应用程序，此blogpost应该帮助我们做出一个好的决定。
- > 我希望您喜欢我们对突变信号状态的危险区域的短暂访问。您如何看待我的逃生策略？我相信还有更多选择。在评论中让我知道。> 谢谢！
