最近，我遇到了这一挑战…重构形式成分的角度信号。
旧形式组件的工作原理：
>
表单数据来自反应性状态服务>表单数据是对象>在将其传递给form component>之前，将其形式数据克隆到克隆之前表单组件通过一个基于经典的装饰 angular @input 接收表单数据
@input({required: true})user!: user;
表格使用[（ngmodel）]来突变形式的数据对象
单击“保存”按钮将通过angular @output 将突变的对象发送到父组件parent组件更新反应性状态服务此设置在我们的许多应用程序中都非常有效。>您可以在此stackblitz中查看此设置，该设置显示基本原理：具有经典angular @input
的形式
重构以信号输入
使用角信号输入，我们可以使组件输入反应性。这听起来很棒！
fyi信号输入是新项目的推荐方法。来自角文档：
>让我们对信号输入进行重构我们的经典angular @input：
user = input.required();
信号输入对象值和[（ngmodel）]
信号输入接收类型用户的对象。我们尝试使用[（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})) } }
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）]的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501459.html
微信扫一扫 
支付宝扫一扫 
