Javascript 角度2-通过引用传递对象场。编辑对象的可重用方法

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

有物体的：

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

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

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

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

我们还可以做两个输入：

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

然后在组件内部执行

this.fieldRef[this.field]

---

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

Javascript就像Java是按值传递的一样，他们从未提供过按引用传递。因此，在您的情况下，最好的选择是直接传递person对象。即使它将被复制到函数中，副本仍然引用相同的对象，因此更改副本中的字段也将更改原始副本中相应的字段

如果要将对象或对象的属性参照到组件，则需要创建类型为eventEmitter的@Output属性

@Input('field') field: any;
@Output() fieldChange = new EventEmitter();

请小心使用“更改”后缀词命名输出属性。它将自动检测您的对象的更改并通知您的主对象。

[field]=“person.job.title”

是（更改

person.job.title

会传播到

字段，但不会反过来传播）

[（field）]=“person.job.title”
将实现（通过
fieldChange
方法所做的更改也会传播回
person.job.title
）
基本上，您希望实现双向绑定-即对对象值的更改：例如
person.job.title
更新您的新编辑组件，但是，从编辑组件所做的更改也会反映回对象值

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

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

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

===========

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

因此，如果您的输入属性是
field
，并且您将输出属性命名为
fieldChange
，那么您可以使用一些奇特的语法来减少输入量

i、 e



相当于：

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


为什么不直接设置值person.job.title=“Software architect”：）因为我想使其可恢复，所以我不想在组件体中写入person.job.title=“foo”。我想在输入字段中传递我想要编辑的内容。如果我将“person.job.title”作为输入传递，它将作为字符串传递，而不是对象的引用，不是吗？我想您希望从编辑字段Component中即时修改对象的值，就是这样？你能给我看一下编辑字段代码吗？你的意思和我在示例中写的类似吗
只需创建一个
@Input（）
字段，说
person
，然后执行
，然后在您的类中，只需修改
person
，然后它会反映出以后的更改，这就是我想要做的。我想编辑数百个对象和数百个字段。我正试图通过一种组件类型实现更高的可重用性。如果你想修改一个对象，请传递一个对象。请看看这个插件-你知道我仍然做错了什么吗？请看看这个插件-你知道我仍然做错了什么吗？太棒了。这很有效。你知道为什么它不能与[（ngModel）]一起工作吗？ngModel添加了一些异步行为来帮助它工作，这似乎总是会把这类事情搞砸。Angular的新功能使得在任何情况下都可以轻松地重新创建双向绑定请看看这个plunker-你知道我仍然做错了什么吗？
@Input('field') field: any;
@Output() fieldChange = new EventEmitter();

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

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

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

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