Angular 5通过组件传递ngModel

Question

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

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

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

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

Answer 1

为了可以在您的组件中使用 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) => {};
    }