Angular 2 - 通过引用传递对象字段。可重复使用的编辑对象的方式

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

拥有一个对象：

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

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

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

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

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

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

or

<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]

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

基本上，您想要完成双向绑定 - 即对象值的更改：例如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();
}

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

===========

如果您理解上述所有内容，那么 Angular 就为这种情况提供了一个小捷径。如果组件的输出属性以特定方式命名，则可以简化编写双向绑定的方式。

所以，如果你的输入属性是field，然后您命名输出属性fieldChange您可以使用一些奇特的语法来减少您需要输入的内容。

i.e.

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

相当于：

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