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

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和

传递

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

和你的孩子

@Input() user:any

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

注意：真的，我喜欢ReactiveForms，请为它们加油使用

Answer 2

实现此目的的方法是在UserComponent上使用@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

处添加一些阅读文档

而且，仅需谷歌搜索，我就能够找到关于相同主题custom-input-and-output-on-same-name-in-angular2-2-way-binding的同样好的答案