Отрисовка динамических компонентов в Angular 5 с помощью NgComponentOutlet

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

В этой гипотезе нам нужно найти способ сообщить Angular о рендеринге тех компонентов, которые нам нужны. Встречайте NgComponentOutlet. Я не знал об этой директиве и поэтому предложил немного более ручное решение, но Роб Вормолд, бог Angular и других вещей, указал мне на еще более чистое решение.

Давайте посмотрим на псевдокод, который поможет нам это визуализировать:

public dynamicTabs = [
    {
        label: 'User Information',
        component: UserInformationComponent
    },
    {
        label: 'Payment',
        component: PaymentComponent
    },
    {
        label: 'Thank You',
        component: ThankYouComponent
    }
];

У каждого объекта есть метка и компонент, который мы хотим визуализировать. Теперь предположим, что мы хотим отобразить эти компоненты в простой настройке вкладки:

<mat-tab-group>
    <mat-tab *ngFor="let tab of dynamicTabs" label="{{tab.label}}">
        <ng-container *ngComponentOutlet="tab.component">
        </ng-container>
    </mat-tab>
</mat-tab-group>

Вот и все! Каждый из этих контейнеров будет отображать тот компонент, который вы указали в своем объекте. Если вам нужно больше контроля, вы даже можете передать дополнительные параметры и настраиваемые форсунки. Вся внутренняя работа изложена в Документации по Angular.

Я постоянно удивляюсь тому, на что способен Angular. В обмен на дополнительную сложность по сравнению с React или Vue, вы действительно получаете набор инструментов, который одновременно широк и глубок.