双向将信号输入对象值绑定为[（ngmodel）]

最近，我遇到了这一挑战...重构形式成分的角度信号。

>

表单数据来自反应性状态服务>
• 表单数据是
对象
• > 在将其传递给form component
>之前，将其形式数据克隆到克隆之前
• 表单组件通过一个基于经典的装饰 angular @input
接收表单数据

• @input({required: true})
  user!: user;
  

  登录后复制
表格使用

• <div>
    <label for="firstname">first name</label>
    <input id="firstname" name="firstname" [(ngmodel)]="user.firstname" />
  </div>
  

  登录后复制
单击“保存”按钮将通过angular @output

parent组件更新反应性状态服务
• 此设置在我们的许多应用程序中都非常有效。
>

的形式

使用角信号输入，我们可以使组件输入反应性。这听起来很棒！

>让我们对信号输入进行重构我们的经典angular @input：

user = input.required<user>();

信号输入对象值和[（ngmodel）]

此代码看起来很不错！

<div>
  <label for="firstname">first name</label>
  <input 
    id="firstname" 
    name="firstname" 
    [(ngmodel)]="user().firstname" 
  />
</div>

>在此stackblitz中，一切似乎都起作用：具有信号输入的形式 - 突变信号状态

！这些危险区域：

>但是，等等...我们刚进入危险区...☢️☣️⚠️⚠️

实际发生了什么？

用户（）解开输入信号。我们掌握了原始的用户对象

这行代码[（ngmodel）] =“ user（）。firstname” will

stutate

> untate

> use对象（包装到信号中），每当文本输入值更改

>时
☢️突变信号对象☣️
• >为什么突变信号状态是一个坏主意？因为我们绕过信号公共api以更新状态。通常，我们只应该使用专用方法设置或更新来更新信号状态。 其他开发人员可能希望使用angular计算的用户信号在用户信号之上构建其他信号。但是，计算的永远不会触发，因为用户信号不知道用户对象突变。这可能是一个令人惊讶的行为。
信号输入仅读取

是的，还有另一个原因，为什么在信号输入上使用[（ngmodel）]至少很奇怪。信号输入应该仅读取。他们没有集合或更新方法 - 因此，没有官方支持以编程方式更改信号输入状态。

>

救援

>让我们尝试尽可能快地逃脱。有什么可能的解决方案？

>

链接信号

>使用链接信号，我们可以创建一个可写的

用户

信号，每当用户信号输入收到新值时，该信号会自动更新。同时，我们可以使用set和更新更新链接信号。

>

可典型的用户是我们的链接信号...

v0.dev

Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

232

查看详情

>

export class userdetailcomponent {
  user = input.required<user>();
  editableuser = linkedsignal(() => this.user()); 

  updateeditableuser(v: partial<user>) {
    this.editableuser.update(state => ({...state, ...v}))
  } 
}

登录后复制

>我们还引入了一种使用公共信号api更新信号状态的可更新的方法：在这种情况下，我们调用链接信号的更新方法。>

<div>
  <label for="firstname">first name</label>
  <input 
    id="firstname" 
    name="firstname" 
    [ngmodel]="editableuser().firstname" 
    (ngmodelchange)="updateeditableuser({firstname: $event})"
  />
</div>

登录后复制

[（ngmodel）]已分为[ngmodel]和（ngmodelchange）>

[ngmodel] =“ decitableuser（）。firstname”将更新用户对象的firstname属性的文本输入

>每当文本输入值更改时，都将执行ngmodelchange回调（更新edediastenuser），并且将更新链接的信号
>

pros

我们使用公共信号api更新状态

我们使用链接的信号，这是一个可写信号
状态变化以专用方法
• 明确发生
不需要对象克隆

cons

• 有一些样板：链接信号设置，ngmodel，ngmodelchange，状态更新方法> 目前，链接的信号仍在开发人员预览中（angular 19）
• stackblitz：带信号输入的形式 - 链接信号
• 影响
• 另一种方法是使用角效应来聆听信号输入的新值。 当我们从输入中收到新值时，我们将原始值分配给本地类属性。

export class userdetailcomponent {
  _user = input.required<user>({alias: 'user'});
  user!: user;

  constructor() {
    effect(() => this.user = this._user())
  }
}

登录后复制

<div>
  <label for="firstname">first name</label>
  <input 
    id="firstname" 
    name="firstname" 
    [(ngmodel)]="user.firstname" 
  />
</div>

登录后复制
在模板中，我们可以像往常一样突变原始对象。

pros

• 模板与我们原始的老式形式组件相同，该组件使用了经典的angular @input
• >我们正式突变一个原始对象（我们不绕过信号api，我们不会突变仅读取的信号输入态）。
>

cons

用户：必须初始化用户：用户：用户= new user（）;否则我们必须告诉typescript，用户始终定义用户！：用户；

需要克隆（带有结构性克隆管的父在父母中）

>命名挑战：_user信号，“用户”别名，原始用户对象的用户属性

> stackblitz：具有信号输入的形式 - 效果

@let方法

使用@let，我们可以在模板中声明变量。

>让我们使用@let从用户信号输入中获取原始对象。此外，我们还可以使用结构性克隆管进行克隆。>

• @let userclone = user() | structuredclone;
  
  <div>
    <label for="firstname">first name</label>
    <input 
      id="firstname" 
      name="firstname" 
      [(ngmodel)]="userclone.firstname" 
    />
  </div>
  

  登录后复制
打字稿：

export class UserDetailComponent {
  user = input.required<User>();
}

登录后复制

pros

>最小样板和最小的代码更改，比较老式（@input）表单组件
@let是让魔术发生的单个地方（解开信号，克隆）>
cons
>对象值是必需的，它不能与原始值一起使用。有关更多详细信息，请参见下面的注释

>。

stackblitz：带信号输入的形式 - @let

笔记

对象与原始值

>在上面的示例中，组件输入接收了一个对象值（用户对象）。 链接的信号和效果方法也将与使用原始值（字符串，布尔，数字...）的信号输入一起工作

>让我们看一下@let方法：
@let变量仅读取...这意味着我们无法将新值重新分配给@let变量。另外，不是通过[（ngmodel）]。如果我们尝试了，那么我们可以看到此编译错误：

>

• @let方法需要一个对象值，我们可以突变。
结论
“ @let方法”似乎是最直接的解决方案，最少的样板。

>效果和链接信号也是有效的选项，但需要更多的设置。

>

>我们仍在评估哪种方法最适合我们的应用程序，此blogpost应该帮助我们做出一个好的决定。
• > 我希望您喜欢我们对突变信号状态的危险区域的短暂访问。您如何看待我的逃生策略？我相信还有更多选择。在评论中让我知道。>
谢谢！

以上就是双向将信号输入对象值绑定为[（ngmodel）]的详细内容，更多请关注php中文网其它相关文章！