javascript - 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 变量绑定(bind)。像这样的事情

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

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

Answer 1

实现这一点的方法是在 UserComponent 上使用 @Input

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

然后绑定(bind)到您在父模板中声明的输入

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

现在这只是一种方法，输入到 UserComponent，

要使其像 ngModel 那样以两种方式工作，您需要添加输出 EventEmiter如下

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

请注意，userChange 关键字对于使其发挥作用非常重要。

只有这样你才能编写双向绑定(bind)

<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