Вызов функции из generi c компонента Angular

Question

Я использую Angular 9, и у меня есть структура данных следующим образом:
myMap: Map<key: string, value: {component: any, data: string}>

У меня есть 3 элемента на карте, первый атрибут моего объекта значения - тип Компонента. , Я использую его для создания динамически новых компонентов. Например:

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.myMap.get(compName).component);
this.container.clear();
const comp = this.container.createComponent(componentFactory);

Теперь я хочу вызвать функцию созданного компонента. Все компоненты имеют одну общую функцию (например, foo(string)), но реализованы по-разному в каждом компоненте. Как я могу вызвать эту функцию. Я попытался сделать:
(<this.myMap.get(compName).component>comp.instance).foo('abcd');
Однако у меня есть ошибка компиляции.

Пример моего объекта карты:

myMap: Map<key: string, value: {component: any, data: string}> = [
    ['compA', {comp: AComponent, data: 'A'}],
    ['compB', {comp: BComponent, data: 'B'}],
    ['compC', {comp: CComponent, data: 'C'}]
]

То, как я думал об этом было с 3, если еще такие утверждения, как:

if (compName === 'compA') {
    (<compA>comp.instance).foo('abcd');
} else if (compName === 'compB') {
    (<compB>comp.instance).foo('abcd');
} else if (compName === 'compC') {
    (<compC>comp.instance).foo('abcd');
}

Но это действительно не красиво, есть ли другой способ сделать это?

Answer 1

1. Определите интерфейс с помощью функции foo:

interface WithFoo {
  foo: (s: string): void
}

Реализуйте этот интерфейс в ваших компонентах:

@Component()
class CompA implements WithFoo {
  foo(s: string): void {...} 
}

Обновление myMap с узким типом для вашего компонента:

type MyMap = Map<string, {component: Type<WithFoo>, data: string}>;

Теперь

• this.myMap.get(compName).component имеет тип Type<WithFoo>
• componentFactory имеет тип ComponentFactory<WithFoo>
• comp имеет тип ComponentRef<WithFoo>
• и, наконец, comp.instance имеет тип WithFoo - так что вы можете вызвать .foo(data) на это