Я пытаюсь обернуть компонент mat-select
в своем собственном пользовательском компоненте, который принимает templateRef для параметров, но, насколько я могу судить, он не получает никаких параметров или не знает, как отобразить они ведут себя как пустой выбор.
Я разместил пример, сравнивающий его с обычным ковриком, здесь: https://stackblitz.com/edit/angular-rifzj8
Вот соответствующие биты из стекаблиц:
// app/select/select.component.ts
import {Component, ContentChild, forwardRef, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
import {NgForOf} from '@angular/common';
import {MatSelect} from '@angular/material';
export const SELECT_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true,
};
@Component({
selector: 'app-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.css'],
providers: [SELECT_VALUE_ACCESSOR]
})
export class SelectComponent implements ControlValueAccessor, OnInit {
constructor() { }
@Input() formControl: FormControl;
@Input() placeholder: string;
@Input() options: any[];
@ContentChild(TemplateRef) optionTemplate: TemplateRef<NgForOf<any>>;
@ViewChild(MatSelect) select;
ngOnInit() {
}
registerOnChange(fn: any): void {
this.select.registerOnChange(fn);
}
registerOnTouched(fn: any): void {
this.select.registerOnTouched(fn);
}
setDisabledState(isDisabled): void {
this.select.setDisabledState(isDisabled);
}
writeValue(obj: any): void {
this.select.writeValue(obj);
}
}
<!-- app/select/select.component.html -->
<mat-select [formControl]="formControl" [placeholder]="placeholder">
<ng-template ngFor let-option [ngForOf]="options" [ngForTemplate]="optionTemplate"></ng-template>
</mat-select>
<!-- app/app.component.html -->
<app-select [options]="foods" placeholder="Pick Food">
<ng-template let-option>
<mat-option [value]="option.value">
{{ option.viewValue }}
</mat-option>
</ng-template>
</app-select>
Я что-то здесь не так делаю?