Angular 角5通模型通过组件

我已经创建了一个简单的组件来包装bootstrap的typeahead控制器，以便按照我想要的方式对其进行配置。该组件有一个公共变量，

selectedWorker

，它是来自typeahead的

ngModel

现在，当我在其他地方使用这个组件时，我想这样做：

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

---

然后将调用者的

foo

变量绑定到具有所选值的查找组件的公共变量。我不知道如何实现。

为了在组件上提供

ngModel

，您需要将组件实现为自定义表单控件。这应该是相对简单的，因为组件的表单行为将与typeahead相同

，或a，如果您愿意的话

---

需要注意的一点是，为了正确实现双向绑定，需要将typeahead组件的

[（ngModel）]

属性拆分为

[ngModel]=“selectedWorker”（ngModelChange）=“onChange（$event）”

，以便调用

writeValue（）

在

onChange

方法中。

要在组件中使用ngModel，您的类必须实现ControlValueAccesor并将组件添加到提供令牌

组成部分

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

---

你好我明白了，DecoratorFactory没有供应商，你知道为什么吗？试着重新安装node_模块，你不必有问题。或者，请确保您编写的代码很好。如果您获得“no provider for decoratorfactory”，则应在提供程序的useExisting属性中将组件替换为您的组件名称。选中此项，您只需将

ngModel

用作

@Input/@Output

名称。