Сопоставить компонент со строкой для динамического компонента - PullRequest
1 голос
/ 24 сентября 2019

Я пытаюсь динамически создать дочерний компонент, как здесь: https://angular.io/guide/dynamic-component-loader

Это работает довольно хорошо, моя проблема в том, что мне нужен тип для использования ComponentFactoryResolver.

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

Теперь я попытался внедрить список {name: string, ctor: Type} в мой хостсоставная часть.Я попробовал это с опцией 'multi':

Providers: [{
        provide: EditModalRef,
        useValue: {ctor: EditmodalComponent, name: 'DefaultEditModal'},
        multi: true
    },
    {
        provide: EditModalRef,
        useValue: {ctor: UserEditModalComponent, name: 'UserEditModal'},
        multi: true
    }]

// Then in my host component:
constructor(private editModals: EditModalRef[]) {

..., которая не работает: "NullInjectorError: StaticInjectorError (AppModule) [EntityComponent -> Array]"

Есть либолее элегантный способ, чем наличие поставщика с 'useValue' и списком всех компонентов?Нет ли способа внедрить в список всех классов подклассы некоторый базовый класс, как в Spring?(Я из бэкэнда).

По сути, я бы хотел, чтобы мои пользователи просто объявили свои компоненты в 'entryComponents' корневого модуля и сопоставили их со строкой.

РЕДАКТИРОВАТЬ: О человек ... после нескольких часов поиска я отправляю это, десять секунд спустя я обнаруживаю, что мне нужно добавить @Inject(EditModalRef) к месту инъекции ... Все еще оставляя вопрос открытым, пока я ищуболее элегантное, «СУХОЕ» решениеg - я не хочу добавлять компонент в пяти разных местах, таких как «entryComponents», «декларации», а также в «поставщиках» с именем в виде строки.

1 Ответ

0 голосов
/ 24 сентября 2019

Да, никакого реального решения проблемы нет: все компоненты Angular должны быть импортированы / объявлены в соответствующих родительских модулях, а динамические компоненты должны быть дополнительно идентифицированы как entryComponents, илитранспортер не знает, что с ними делать (хотя в зависимости от того, что вы пытаетесь сделать, вы можете вырезать декларацию providers).

Они 'Вы немного староваты, но у Angular-In-Depth есть хороший материал по использованию DCL Angular:

  1. Вот что вам нужно знать о динамических компонентах в Angular ;
  2. Динамически загружаемые компоненты с угловым интерфейсом CLI
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...