Как передать в компонент вычисляемое выражение?

Question

[Артем]

Есть компонент, которому передается список элементов. Тип и структура элементов неизвестна компоненту. Эти элементы необходимо группировать и сортировать по правилам, известным только родительскому компоненту.

Очевидный способ: в родительском компоненте объявить метод, который будет принимать один из элементов и возвращать, например, строку на основании которой дочерний компонент будет сортировать элементы.

Как хотелось бы: передать компоненту выполняемое typescript выражение с работой над "контекстом". Почти как стрелочная функция, только стрелочные функции не работают в шаблонах angular.

Пример:

<!-- parent component html -->
<my-component [expression]="$context.foo.bar" [items]="Items"></my-component>

// my-component code
@Input() expression: Function;
@Input() items: any[];
...
const results = this.items.map(item => this.expression(item)); // $context = item

Comments

[Артем]

Безопасно ли использовать для этих целей функцию eval? Учитывая, что строка создается в шаблоне?

[Дмитрий Лузанов]

Эти элементы необходимо группировать и сортировать по правилам, известным только родительскому компоненту.

А почему нельзя это сделать в родительском компоненте и передать уже готовый вариант в дочерний?

[Артем]

Дмитрий Лузанов, я изначально хотел вариант с минимум изменений в родительском компоненте. В итоге сделал через передачу строки из которой потом создается функция через new Function(str). Так небезопасно, поэтому вероятно избавлюсь от этого и буду подготавливать набор данных перед передачей дочернему компоненту.

[Sasha Novik]

Я может что-то упускаю в задаче, а почему нельзя передавать функцию в компонент из родителя?

export class ParentComponent {
  fn = (value: number) => {
    return value * 2;
  }
}

<child [fn]="fn"></child>

export class ChildComponent {
  @Input() fn: (value: number) => number;
  ...
  const results = this.items.map(i => this.fn(i));
}

[Артем]

Sasha Novik, ничего не упускаете. Все можно. Просто хотелось проверить возможности ангуляра и уменьшить немного код

Answer 1

[Антон Швец]

По-идее функции обработчики неплохо бы переносить в сервис.

<!-- parent component html -->
<my-component [funcName]="'myFunc'" [items]="Items"></my-component>

// my-component code
@Input() expressionName: string;
@Input() items: any[];
...
const results = this.items.map(item => this.service[funcName](item)); // $context = item

Comments

[Артем]

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

Но не в сервисе даже дело. Идея функции вида:

public PlaceIdValue(item: Place): string {
    return item.Id;
}
public AnotherIdValue(item: Another): string {
    return item.SomeProperty.Id;
}

Перенести в шаблоны:

<my-component [items]="Places" [itemId]="$item.id"></my-component>
<my-component [items]="AnotherItems" [itemId]="$item.SomeProperty.Id"></my-component>