角度2-通过引用传递对象字段。可重用的方式来编辑对象

Question

我正在创建可重用的表组件，该组件将允许编辑对象字段以准备将其发送到API。

有一个对象：

person: {
  name: "John"
  job: {
    type: "IT"
    title: "Software Engineer"
  }
}

我想将对象嵌套字段传递给组件并进行编辑。铁

<edit-field [field]="person.job.title"></edit-field>

这将产生一个输入字段，该输入字段将完全编辑原始对象中的标题字段。问题在于person.job.title是一个字符串，而不是对象或数组，因此不会通过引用传递。

我有2个想法可以解决该问题：1）将“ person.job.title”作为字符串传递：

<edit-field [field]="'person.job.title'"></edit-field>

要么

<edit-field field="person.job.title"></edit-field>

并在组件类中用“。”分隔：

let fields = this.field.split('.');

然后执行while循环以通过引用访问该字段。

我们还可以做2个输入：

<edit-field-component [fieldRef]="person.job" [field]="'title'"></edit-field-component>

然后在组件内部做 this.fieldRef[this.field]

我想知道是否还有其他更干净的方法可以实现这一目标。

Answer 1

基本上，您想完成双向绑定-即更改对象值：例如，person.job.title更新新的编辑组件，但从您的编辑组件所做的更改也将反映回对象值。

在Angular中，这意味着您必须同时绑定两种方式：

<edit-field [field]="person.job.title"  (change)="person.job.title=$event"></edit-field>

您的edit-field组件具有一个@Output属性，该属性会在有人键入内容时发出更改的值。从@Output属性发出的值将在变量中$event，您只需要将其分配回您要更新的属性即可。

因此，您的EditFieldComponent可能类似于：

@Component({
   .....
   template: `
      <input (input)="change.emit($event.target.value)" ....   />
   `
})
export class EditFieldComponent {
   change = new EventEmitter();
}

上面的意思是，每当输入事件在您的输入字段上触发时，组件的changeoutput属性将发出输入字段的新值。

===========

如果您了解上述所有内容，那么Angular会为该确切场景提供一些捷径。如果将组件的输出属性命名为特定方式，则可以简化编写双向绑定的方式。

因此，如果输入属性为field，并且为输出属性命名，则fieldChange可以使用一些特殊的语法来减少必须键入的内容。

即

<edit-field [field]="person.job.title"  (fieldChange)="person.job.title=$event"></edit-field>

等效于：

<edit-field [(field)]="person.job.title"></edit-field>