angular - 如何在自定义元素上实现 ngModel？

Question

给定一个简单的 input 元素，我可以这样做:

<input [(ngModel)]="name" /> {{ name }}

这不适用于我的自定义元素:

<my-selfmade-combobox [(ngModel)]="name" values="getValues()" required></my-selfmade-combobox>

我该如何实现？

Answer 1

[(ngModel)]="item" 是 [ngModel]="item"(ngModelChange)="item = $event"

这意味着如果你想给你的组件添加一个双向绑定(bind)属性，例如

<app-my-control [(myProp)]="value"></app-my-control>

您需要在组件中做的就是添加

@Input()
myProp: string;

// Output prop name must be Input prop name + 'Change'
// Use in your component to write an updated value back out to the parent
@Output()
myPropChange = new EventEmitter<string>();

@Input 将处理写入并将新值写回父级，只需调用 this.myPropChange.emit("Awesome") (如果您只是想确保每次值更改时更新它，您可以将发射器放入属性的 setter 中。)

您可以阅读有关其工作原理/原因的更详细解释 here .

---

如果你想使用名称 ngModel(因为有额外的指令绑定(bind)到带有 ngModel 的元素)，或者这是一个 FormControl 元素而不是组件(又名，用于 ngForm)，那么您将需要使用 ControlValueAccessor。有关制作您自己的 FormControl 及其工作原理的详细说明，请阅读 here .