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)的{{1}}。

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

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

var1

我一直希望像<my-custom-input [injectedNgModel]="var1" (outputNgModel)="var1">这样的东西，但我无法让它像这样工作。

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

Answer 1

更改一词为您带来了魔力，它创建了两种数据绑定方式-意味着您有[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">-更改

一词的神奇之处

在您的子组件中，您可以阅读<input [(ngModel)]="injectedNgModel">

这样的get和set属性。

希望这对您有所帮助-编码愉快：）

角度自定义ngModel [（...）]

1 个答案: