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 инпута сделайте
    – arturovt
    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 you have read our privacy policy.

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