0

Хочу сделать компонент селектор, к которому можно привязать несколько определенных типов и каждый тип будет обрабатываться немного со своими нюансами при отображении/редактировании.

Например, есть тип SomeType {id:number,name:string}, и я хочу разрешить биндить number[], либо SomeType[].

Сначала я пошел очевидным путем: Создал поле @Input() SomeField с типом данных number[]|SomeType[] и поле @Output() SomeFieldChange= new EventEmitter<number[]|SomeType[]>();, но столкнулся с тем, что если мне будет передан пустой массив, то я никак не могу определить тип из-за природы JavaScript => верно выстроить логику.

Сейчас я решил эту задачу через ввод перечисления:

export enum InputType {
  Ids,
  SomeFields
}

и дополнительного поля @Input() inputType: InputType;

Однако, является это решение верным или есть другие лучшие пути?

2
  • 2 инпута сделайте 11 апр 2019 в 18:09
  • В этом есть смысл. Правда придется контроллить несколько полей
    – iluxa1810
    11 апр 2019 в 18:45

1 ответ 1

2

В Angular не принято контролировать несколько типов в контексте одного байндинга, это попахивает спагетти, я, например, такого никогда не видел. Намного легче иметь несколько отдельных байндингов и контролировать этот поток данных (с родительского вниз к дочернему компоненту).

С другой стороны, если вы все же не хотите обрабатывать 2 байндинга, вам никто не мешает создать собственные коллекции:

export class NumberCollection extends Array<number> {}
export class SomeFieldCollection extends Array<SomeType> {}

Далее создать инстансы этих классов:

public numbers = new NumberCollection();
public someFields = new SomeFieldCollection();

Задать входным параметром:

[someField]="numbers"
// OR
[someField]="someFields"

Даже если массив пустой - вы можете сделать проверку, на то что объект принадлежит к определенному классу:

@Input()
public someField: NumberCollection | SomeFieldCollection;

public ngOnInit(): void {
  if (this.someField instanceof NumberCollection) {
    ...
  }

  if (this.someField instanceof SomeFieldCollection) {
    ...
  }
}

В другом случае - делайте 2 отдельных входных параметра.

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.