javascript - 将内部 `[(ngModel)]` 用于通用控件？

Question

我有一个独立的 hello 组件 - 它包含一个 Input

<input type='text' [(ngModel)]='innerValue'   />

这个组件所做的(为了简化问题)是添加一个红色边框

(此组件在整个应用程序的许多地方都在使用。)

但是如果我这样使用它:

<hello     [(ngModel)]="v1.a" ></hello>

 {{v1 | json}}

哪里:

 public v1 ={a:'123'}; 

然后最初它具有相同的值:

但如果我更改输入值 - 我看不到反射(reflect)的值:

我知道我可以传递整个对象 v1 并在 home 组件中使用 v1.a 但我想在很多地方使用该文本框总是 ngModeled 到 v1.a

所以在 Banana 组件中它应该是:

<hello  type='text' [(ngModel)]='myBanana.name'   />

在 Apple 组件中它应该是:

<hello  type='text' [(ngModel)]='myapple.color'   />

问题:

如何让 home 组件“支持”任何 ngModel 值并更新外部模型？

online demo 1

Answer 1

改变这一行:

<input type='text' [(ngModel)]="innerValue" />

对此:

<input type='text' (ngModelChange)='onChangeCallback($event)' [ngModel]="innerValue"  />

如果您正在实现 ControlValueAccessor，则需要在内部组件状态发生变化时随时调用 onChangeCallback。

工作 fork demo