我创建了一个简单的组件,它包装了bootstrap的typeahead控制器,因此它按照我想要的方式进行配置。该组件有一个公共变量selectedWorker
,它是来自输入的ngModel
。
所以现在,当我在其他地方使用这个组件时,我想做这样的事情:
<app-worker-lookup [(ngModel)]="foo"></app-worker-lookup>
然后将调用者的foo
变量绑定到具有所选值的查找组件的公共变量。我不确定如何实现它。
答案 0 :(得分:1)
为了在组件上提供ngModel
,您需要将组件实现为自定义表单控件。这应该是相对简单的,因为您的组件的表单行为将与typeahead的相同。
Here's a nice article on how to do this,如果您愿意,还可以Stack Overflow answer。
需要注意的一点是,为了正确实现双向绑定,您需要将预先输入组件的[(ngModel)]
属性拆分为[ngModel]="selectedWorker" (ngModelChange)="onChange($event)"
,以便调用writeValue()
在onChange
方法中。
答案 1 :(得分:1)
为了在您的Component中使用ngModel,您的类必须实现ControlValueAccesor并将Component添加到提供令牌
组件
@Component({
selector: 'component',
templateUrl: '../component.html',
styleUrls: ['../component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Component),
multi: true
}
]
})
export class Component implements ControlValueAccessor {
//
// Now add ngModel property binding
@Input() ngModel : NgModel;
....
//
// ControlValueAccessor implementation
writeValue(value:any) {
this.value = value;
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched(fn){
}
private propagateChange = (_:any) => {};
}