На помощь приходит ручная инициализация компонентов, которая позволяет вынести фактически всю бизнес логику из шаблона в код.
Первый вариант - использование ComponentFactoryResolver
. Он дает возможность получить скомпилированную фабрику компонента, которая предоставляет интерфейс для инициализации компонента. Вы привели в пример такой шаблон:
<app-support-error>
<app-support-billing>
<app-support-info>
У вас под рукой есть конструкторы этих компонентов, для app-support-error
- предполагаю SupportErrorComponent
и так далее. Все компоненты нужно добавить в entryComponents
модуля, в скоупе которого вы их объявляете (declarations
):
@NgModule({
imports: [...],
declarations: [SupportErrorComponent],
entryComponents: [SupportErrorComponent]
})
export class SomeModule {}
Когда компилятор натыкается на свойство entryComponents
- он генерирует фабрики до рантайма.
Вы говорите, что у вас есть enum
с типами того, что возвращает API. Нам в этом случае нужна хеш-таблица (ключ-значение), то есть тип-компонент:
type SupportComponent =
SupportErrorComponent |
SupportBillingComponent |
SupportInfoComponent;
const enum SupportType {
Error,
Billing,
Info
}
const supportComponents = {
// `app-support-error`
[SupportType.Error]: SupportErrorComponent,
// `app-support-billing`
[SupportType.Billing]: SupportBillingComponent,
// `app-support-info`
[SupportType.Info]: SupportInfoComponent
};
function getSupportComponent(type: SupportType) {
return supportComponents[type];
}
Дело за малым, нужный конструктор для нужного типа у нас есть. Теперь остается написать функционал для инициализации компонента:
function renderSupportComponent(
type: SupportType,
resolver: ComponentFactoryResolver,
viewContainerRef: ViewContainerRef,
injector: Injector
): ComponentRef<SupportComponent> {
const component = getSupportComponent(type);
const factory: ComponentFactory<SupportComponent> = resolver.resolveComponentFactory(component);
// `0` - индекс, куда проецировать шаблон в контейнере (т.е. в самое начало)
return viewContainerRef.createComponent(factory, 0, injector);
}
renderSupportComponent
- это функция, которая параметром принимает тип, который вам возвращает ваше API (подставьте свой), инстанс ComponentFactoryResolver
, у которого есть доступ к закешированным фабрикам, инстанс ViewContainerRef
- абстракция из ядра Angular, представляет из себя контейнер для создания динамических представлений разными способами (используя фабрики либо TemplateRef
), инстанс Injector
- чтобы у динамического компонента был также доступ к системе DI.
В шаблоне компонента, где вы проджектите в данный момент эти селекторы:
<app-support-error>
<app-support-billing>
<app-support-info>
Можете убрать их и заменить на:
<ng-container #support></ng-container
ng-container
- это элемент без селектора (его нет в DOM дереве, но есть в памяти). Это будет плейсхолдер для наших динамических компонентов, то есть место, куда мы их будем проджектить, мы можем получить к нему доступ из компонента, используя @ViewChild
:
class ParentComponent {
@ViewChild('support', { read: ViewContainerRef })
public supportContainer: ViewContainerRef = null;
}
После того, как вы сделали запрос и вам пришел ответ - можете использовать функцию renderSupportComponent
:
@ViewChild('support', { read: ViewContainerRef })
public supportContainer: ViewContainerRef = null;
private ref: ComponentRef<SupportComponent> | null = null;
constructor(private resolver: ComponentFactoryResolver, private injector: Injector) {}
public makeSomeRequest(): void {
this.someService.makeSomeRequest().pipe(
map((type: SupportType) =>
renderSupportComponent(type, this.resolver, this.supportContainer, this.injector);
)
).subscribe((ref: ComponentRef<SupportComponent>) => {
this.ref = ref;
});
}
ComponentRef
- это ссылка на инициализированный динамеческий компонент, нужно для того, чтоб мы могли освобождать ресурсы. Для того, чтобы уничтожить компонент, достаточно вызвать destroy
:
this.ref.destroy();
this.ref = null;
Также можно добавить ngOnDestroy
хук, чтоб уничтожать компонент вместе с родителем:
public ngOnDestroy(): void {
if (this.ref) {
this.ref.destroy();
this.ref = null;
}
}
Еще есть второй вариант - структурная директива. Это в том случае, если вы хотели бы переиспользовать эту логику:
@Directive({ selector: '[support]' })
export class SupportDirective implements OnChanges, OnDestroy {
@Input('support')
public type: SupportType = null;
private ref: ComponentRef<SupportComponent> | null = null;
constructor(
private resolver: ComponentFactoryResolver,
private injector: Injector,
private viewContainerRef: ViewContainerRef
) {}
public ngOnChanges(changes: SimpleChanges): void {
this.dispose();
this.create(changes.type.currentValue);
}
public ngOnDestroy(): void {
this.dispose();
}
private create(type: SupportType): void {
this.ref = renderSupportComponent(
type,
this.resolver,
this.viewContainerRef,
this.injector
);
}
private dispose(): void {
if (this.ref) {
this.ref.destroy();
this.ref = null;
}
}
}
Вам нужно сеттить тип, возвращаемый сервером, в свойство компонента:
this.someService.makeSomeRequest().subscribe((type) => {
this.type = type;
});
Шаблон также превращается в:
<ng-container *support="type"></ng-container>