Динамические компоненты: вставляйте компоненты типа X на лету

Question

Есть две вещи, которые я хочу достичь. Оба требуют интеллектуального использования компонентов.

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

1. У меня есть список «вещей». Однако «вещь» является только родителем, и у нее много детей. Это означает, что существует несколько типов вещей, каждый из которых имеет разные значения. Это заставило меня создать Компонент для каждой вещи: каждый со своим собственным шаблоном. Однако я также хочу отобразить список этих вещей. Я не знаю их заранее, хотя: я собираю их с сервера. Я не знаю их типов или количества вещей, прежде чем получить данные. Теперь я хочу перечислить каждую «вещь», добавляя каждый раз компонент нужного типа. Как правильно добавить привязки для динамической загрузки компонентов?

2. Мои пользователи могут настраивать их профиль, используя различные модальности. Результирующий макет выводится с сервера. Это означает, что, опять же, я не знаю, сколько модалов или тип модального заранее. Как теперь я смогу правильно их включить?

TL; DR Как я могу динамически связывать компоненты, не установив нужное количество привязок с их соответствующими типами?

Answer 1

Вот одна вещь, которую вы можете сделать, когда компонент информация поступает с сервера:

Вы все еще должны поставить все свои компоненты в исходном шаблоне, но вы только показать, что сервер возвращает:

<div *ngFor="let dynamic of fromServer" [ngSwitch]="dynamic .id"> 
     <thing-a *ngSwitchCase="'thinga'" [data]="dynamic"></thing-a> 
     <thing-b *ngSwitchCase="'thingb'" [data]="dynamic"></thing-b> 
     <thing-c *ngSwitchCase="'thingc'" [data]="dynamic"></thing-c> 
     <thing-d *ngSwitchCase="'thingd'" [data]="dynamic"></thing-d> 
     <thing-e *ngSwitchCase="'thinge'" [data]="dynamic"></thing-e> 
     <thing-f *ngSwitchCase="'thingf'" [data]="dynamic"></thing-f> 
</div> 

Таким образом, если сервер возвращает:

[ 
    { id : "thinga" } 
    { id : "thingd" } 
    { id : "thingf" } 

] 

Тогда только эти 3 будут показаны.

Вы можете также динамически сортировать компоненты в зависимости от того в каком порядке сервер возвращает данные

Edit:

Если сервер возвращает thinga 3 раза, это будет показано в 3 раза.

Edit 2: Пример:

[ 
    { id : "thinga", title: "Yes"} 
    { id : "thinga", title: "No" } 
    { id : "thinga", title: "Maybe" } 
] 

Каждый thinga компонент получит свои данные