У меня следующая ситуация.Я создал пользовательский компонент formcontrol, основанный на определенном перечислении для выпадающего списка, подобного этому.
my CommunicationLanguageCodeComponent.ts
import { Component, OnInit, forwardRef, Input } from '@angular/core';
import { LanguageCodeType } from
'@app/services/generated/EOL3.WebApi.Generated.Service';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-communication-language-code',
templateUrl: '../enum-dropdown-list.html',
styleUrls: ['./communication-language-code.component.css'],
providers: [{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => CommunicationLanguageCodeComponent),
}]
})
export class CommunicationLanguageCodeComponent implements OnInit, ControlValueAccessor {
@Input() mySelectedType: LanguageCodeType;
options: string[];
onChange: any = () => { };
onTouched: any = () => { };
get valueProp() {
return this.mySelectedType;
}
set valueProp(val) {
this.mySelectedType = val;
this.onChange(val);
this.onTouched();
}
constructor() {}
ngOnInit() {
const options = Object.keys(LanguageCodeType);
this.options = options.slice(options.length / 2);
}
parseValue(eventVal: string) {
this.mySelectedType = LanguageCodeType[eventVal];
this.writeValue(this.mySelectedType);
}
writeValue(val: any) {
if (val !== null && val !== undefined) {
this.valueProp = val;
}
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouched = fn;
}
}
, затем я вызываю компонент, подобный этому, в формате html.
<app-communication-language-code formControlName="communicationLanguageCode"></app-communication-language-code>
и для справки мой enum-dropdownlist.html выглядит следующим образом
<select class="form-control" (change)="parseValue($event.target.value)">
<option *ngFor="let name of options" [selected]="options[mySelectedType]==name" >{{name}}</option>
</select>
, и все это прекрасно работает!
в этом случае тип перечисления, используемый tsкласс является LanguageCodeType.Поскольку у меня много разных выпадающих списков с разными перечислениями, и в настоящий момент мне нужно создать разные компоненты для каждого выпадающего списка, я бы хотел сделать что-то вроде этого
AbstractDropdownComponent.ts
import { Component, OnInit, forwardRef, Input, AfterViewInit, AfterViewChecked } from '@angular/core';
import {
GenderCodeType,
MaritalStatusCodeType,
CountryCodeType
} from '@app/services/generated/EOL3.WebApi.Generated.Service';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-enum-type-dropdown',
templateUrl: './enum-dropdown-list.html',
styleUrls: ['./abstract-dropdown.component.css'],
providers: [{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => AbstractDropdownComponent),
}]
})
export class AbstractDropdownComponent implements OnInit, ControlValueAccessor, AfterViewChecked {
@Input() mySelectedType: any;
options: string[];
onChange: any = () => { };
onTouched: any = () => { };
get valueProp() {
return this.mySelectedType;
}
set valueProp(val) {
this.mySelectedType = val;
this.onChange(val);
this.onTouched();
}
constructor() {}
ngAfterViewChecked() {
const options = Object.keys(typeof this.mySelectedType);
this.options = options.slice(options.length / 2);
}
ngOnInit() {
}
parseValue(eventVal: string) {
this.mySelectedType = typeof this.mySelectedType[eventVal];
this.writeValue(this.mySelectedType);
}
writeValue(val: any) {
if (val !== null && val !== undefined) {
this.valueProp = val;
}
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouched = fn;
}
}
с html-тегом вроде ...
<app-enum-type-dropdown formControlName="languageCode" [mySelectedType]="mytype"></app-enum-type-dropdown>
, поэтому мой вопрос: возможно ли определить конкретный тип перечисления, необходимый из типа formControlName дополнительного свойства mytype, или как мне это сделать.... ???(typeof this.mySelectedType), очевидно, не работает, но я надеялся, что есть способ сделать это более абстрактным, поскольку я обнаружил, что выполняю много операций копирования и вставки, просто меняя тип перечисления.
спасибо заранее