Angular 中的自定义组件，带有 ngModel 和多个字段

Question

假设我想在 Angular 2+ 中为以下类创建自定义组件

public class user {
name: string;
id: number;
address: string;
}

我创建了一个自定义组件

<input [(ngModel)]="name" />
<input [(ngModel)]="id" />
<input [(ngModel)]="address" />

我已将此自定义组件添加到我的主页中

<user-component></user-component>

我现在要做的是将 User 类作为 ngModel 传递到我的自定义组件中，并将其与主页类中的public user:User变量绑定。 像这样的东西

<user-component [(ngModel)]="user"></user-component>

我发现很少有使用ControlValueAccessor, NG_VALUE_ACCESSOR的示例，但所有这些示例都适用于单个组件，例如一个文本输入。有没有办法让它也适用于自定义组件内的多个输入？

Answer 1

实现此目的的方法是在用户组件上使用@Input

export class UserComponent {
@Input() user: User;
}

然后绑定到在父模板中声明的输入

<user-component [user]="user"></user-component>

现在这只是一种方式，输入到用户组件，

要使它像ngModel一样工作，您需要添加输出EventEmiter 如下

export class UserComponent {
@Input() user: User;
@Output('userChange') emitter: EventEmitter<User> = new EventEmitter<User>();
}

请注意，用户Change关键字在这里很重要，可以使其正常工作。

只有这样，您才能编写双向绑定

<user-component [(user)]="user"></user-component>

---

在这里添加一些阅读文档 angular.io/guide/template-syntax#property-binding-property

同样只需谷歌搜索，我就能够找到这个关于同一主题的很好的 SO 答案 自定义输入和输出-同名角度2-2 路绑定

Answer 2

因为你有一个对象，你可以简单地将对象作为@Input传递，并且

<user-component [user]="user"></user-component>

和你的孩子

@Input() user:any
<input [(ngModel)]="user.name" />
<input [(ngModel)]="user.id" />
<input [(ngModel)]="user.address" />

注意：我真的很喜欢反应式表单，振作起来使用这些