Динамический компонент рендеринга на основе родительского свойства ввода?

Question

По сути, у меня есть родительский компонент с именем «Просмотр страницы», который показывает несколько примеров того, как можно использовать определенный компонент.Текущий отображаемый компонент должен измениться через свойство ввода маршрута, полученное компонентом Pageview.В конечном счете, я хочу иметь возможность отображать несколько версий этого компонента одновременно и передавать им различные входные свойства (чтобы показать примеры использования этого компонента).

В Vue вы можете сделать что-то простое, например::

<component
  :is = "currentComponent"
  v-for: "example in examplesOfCurrentComponent"
  :text: "example.text"
 > 
<div v-if="example.slotContent" v-html="example.slotContent" />
</component

Я знаю кое-что о динамических компонентах в документах Angular, но это действительно очень легко применить для создания одного динамического компонента и последующей передачи его свойств Input в файл родительского компонента .ts (через ViewChild, ViewContainerRef, Resolver Factory Component и т. д.).Однако я пытаюсь создать несколько одинаковых дочерних компонентов, каждый из которых имеет разные свойства ввода.

В настоящее время угловые документы рекомендуют что-то вроде:

    <ng-template currentComponent
    ></ng-template>

Где currentComponent - это директива, содержащаяViewContainerRef.После этого я смогу создать экземпляр экземпляра в родительском элементе.

Однако, как мне расширить это до добавления * ngFor для создания нескольких компонентов, а затем получить каждый из них, чтобы иметь свои уникальные свойства ввода(как в примере Vue).

Answer 1

Вы также можете создавать динамические компоненты, используя цикл for.Один из способов, которые я решил, - передать различные компоненты в качестве входных данных (компоненты могут быть одинаковыми).

См. Пример ниже

this.components.forEach( (sideNavComponent: DrawerConfig) => {
  const factory = this.resolver.resolveComponentFactory(sideNavComponent.type);
  const componentRef = this.vc.createComponent(factory);
  const component = componentRef.instance;
  component.data = sideNavComponent.data;
});

https://github.com/sanketmaru/ng-lib-sank/blob/master/projects/ng-lib-sank/src/lib/drawer/drawer.component.ts#L29

Для отправки компонентов вы можете просто передать компоненты следующим образом: -

public components: [DrawerConfig<DrawerItemComponent>, DrawerConfig<DrawerItemComponent>] = [
    {
      type: DrawerItemComponent,
      data: {
        name: 'First Component'
      }
    },
    {
      type: DrawerItemComponent,
      data: {
        name: 'Second Component'
      }
    }
  ];

Над кодом используется Generics, поэтому любые данные могут использоваться динамическими компонентами.Надеюсь это поможет.

Полный код можно найти здесь

https://github.com/sanketmaru/ng-lib-sank/blob/master/src/app/app.component.ts#L17