角度2-通过引用传递对象字段.可重用的方式来编辑对象 [英] Angular 2 - pass an object field by reference. Reusable way to edit objects

问题描述

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

I am creating reusable table component which will enable editing of objects fields to prepare them for sending to the API.

有对象:

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

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

I would like to pass the object nested field to a component and edit. F.e:

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

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

Which results in an input field that edits exactly the title field in original object. The problem is that person.job.title is a string, not and object or array so it's not passed by reference.

我有2个想法可以解决此问题:1)将"person.job.title"作为字符串传递:

I had 2 ideas haw the problem could be solved: 1) pass "person.job.title" as a string:

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

或

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

在组件类中，请用."分隔:

And in component class do split by a ".":

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

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

and then do a while loop to access the field by reference.

我们还可以进行2次输入:

We could also do 2 inputs:

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

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

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

I am wondering if there is any other, more clean, way to achieve that.

推荐答案

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

Basically, you want to accomplish two-way binding - i.e. changes to the object value: eg person.job.title updates your new edit component, but also changes made from your edit component also get reflected back to the object value.

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

In Angular, that means you have to bind both ways:

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

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

where your edit-field component has an @Output property that emits the changed value whenever someone types into it. The value emitted from the @Output property will be in the variable $event and you simply want to assign that back to the property that you want to update.

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

So, your EditFieldComponent can look something like:

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

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

The above means that whenever an input event triggers on your input field, the component's change output property will emit the new value of the input field.

===========

===========

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

If you understand everything above, then Angular provides a little shortcut for this exact scenario. If the output property of your component is named a specific way, you can simplify how you write the two way binding.

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

So, if your input property is field, and you name your output property fieldChange you can make use of some fancy syntax to cut down how much you have to type.

即

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

等效于:

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

这篇关于角度2-通过引用传递对象字段.可重用的方式来编辑对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！