Javascript 使用内部“[（ngModel）]”作为通用控件？

我有一个独立的

hello

组件，它包含一个

输入

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

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

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

我知道我可以传递整个对象

v1

并在home组件中使用

v1.a

，但我想在很多地方使用该文本框，因为它并不总是被建模为

v1.a

因此，在香蕉成分中，它应该是：

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

在Apple组件中，它应该是：

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

问题：

如何使主组件“支持”任何ngModel值并更新外部模型

更改此行：

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

为此：

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

如果要实现

ControlValueAccessor

，则需要在内部组件状态更改时随时调用

onChangeCallback

工作分叉

更改此行：

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

为此：

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

如果要实现

ControlValueAccessor

，则需要在内部组件状态更改时随时调用

onChangeCallback

工作叉