角度自定义ngModel[(..)]

Question

我已经创建了一个自定义组件，并想为它创建一个自定义[(ngModel)]。假设我在组件中有这个：

<input [(ngModel)]="var1"> // (first input)
<my-custom-input [injectedNgModel]="var1"><my-custom-input>

在我的<my-custom-input>中，我有这个：

@Input() injectedNgModel: any;
...
<input [(ngModel)]="injectedNgModel"> // (second input)

然后，当您在(first input)中输入文本时，它将更新(second input)。但当您在(second input)中输入文本时，它不会更改(first input)，即var1。

如何使@Input将数据发送回其父级

我不想要的是@Output，因为组件太忙了：

<my-custom-input [injectedNgModel]="var1" (outputNgModel)="var1">

我希望有[(injectedNgModel)]="x"这样的东西，但我不能让它这样工作

https://stackblitz.com/edit/angular-upyf32

Answer 1

单词Change为您带来了创建双向数据绑定的魔力-意味着您有[ngModel]和(ngModelChange)事件要绑定为[(ngModel)]香蕉式语法

因此，在您的情况下，您需要将injectedNgModel作为@Input()，将injectedNgModelChange作为@Output()事件发射器

试试这个

modelValue: string;
@Output()
injectedNgModelChange: EventEmitter<any> = new EventEmitter<any>();
@Input()
get injectedNgModel(): string {
return this.modelValue;
}
set injectedNgModel(val: string) {
this.modelValue= val;
this.injectedNgModelChange.emit(this.modelValue);
}

这将创建到输入变量injectedNgModel的双向数据绑定，您将获得父组件和子组件上的更新值

你可以访问它<my-custom-input [(injectedNgModel)]="var1">-这就是单词Change的魔力

在您的子组件中，您可以读取获取和设置属性，如下<input [(ngModel)]="injectedNgModel">

希望这能帮助你-快乐编码：(