Угловой 5 проходной нгМодель через компоненты

Question

Я создал простой компонент, который оборачивает контроллер начальной загрузки boottrap, поэтому он настроен так, как я хочу для приложения. Компонент имеет открытую переменную selectedWorker, то есть ngModel от typeahead.

Так что теперь, когда я использую этот компонент в другом месте, я бы хотел сделать что-то вроде этого:

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

Answer 2

Для того, чтобы ngModel был доступен для компонента, вам нужно реализовать компонент как пользовательский элемент управления формы.Это должно быть относительно просто, поскольку поведение формы вашего компонента будет таким же, как и у typeahead.

Вот хорошая статья о том, как это сделать , или Ответ переполнения стека если вы предпочитаете.

Следует отметить, что для правильной реализации двустороннего связывания вам нужно разделить атрибут [(ngModel)] компонента typeahead на [ngModel]="selectedWorker" (ngModelChange)="onChange($event)", чтобы вы могли вызыватьwriteValue() в методе onChange.