Angular 5通过组件传递ngModel

时间:2018-05-17 16:26:34

标签: angular angular5 angular-ngmodel

我创建了一个简单的组件,它包装了bootstrap的typeahead控制器,因此它按照我想要的方式进行配置。该组件有一个公共变量selectedWorker,它是来自输入的ngModel

所以现在,当我在其他地方使用这个组件时,我想做这样的事情:

<app-worker-lookup [(ngModel)]="foo"></app-worker-lookup>

然后将调用者的foo变量绑定到具有所选值的查找组件的公共变量。我不确定如何实现它。

2 个答案:

答案 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) => {};
    }