динамически получать тип enum в angular для абстракции dropdownlist - PullRequest
0 голосов
/ 05 марта 2019

У меня следующая ситуация.Я создал пользовательский компонент 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), очевидно, не работает, но я надеялся, что есть способ сделать это более абстрактным, поскольку я обнаружил, что выполняю много операций копирования и вставки, просто меняя тип перечисления.

спасибо заранее

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...