使用内部`[（ngModel）]`进行通用控件？

Question

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

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

所有这些组件正在做（为简化问题）是添加红色边框

（该组件正在整个应用程序的许多地方使用。）

但如果我使用它：

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

 {{v1 | json}}

其中：

 public v1 ={a:'123'}; 

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

但如果我更改输入值 - 我看不到反映的值：

我知道我可以传递整个对象v1并在主页组件中使用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。

工作分叉demo