1
0

Destroy dynamically generated components in onDestroy & replace deprecated createComponent

This commit is contained in:
Alexandre Vryghem
2023-12-28 20:42:21 +01:00
parent b28e24fda3
commit 6497a156aa
5 changed files with 78 additions and 54 deletions

View File

@@ -1,5 +1,4 @@
import {
ComponentFactoryResolver,
ComponentRef,
Directive,
Input,
@@ -12,6 +11,7 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
import { PlacementDir } from './context-help-wrapper/placement-dir.model';
import { ContextHelpService } from './context-help.service';
import { hasValue } from './empty.util';
export interface ContextHelpDirectiveInput {
content: string;
@@ -43,7 +43,6 @@ export class ContextHelpDirective implements OnChanges, OnDestroy {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver,
private contextHelpService: ContextHelpService
) {}
@@ -53,19 +52,21 @@ export class ContextHelpDirective implements OnChanges, OnDestroy {
this.contextHelpService.add({id: this.dsContextHelp.id, isTooltipVisible: false});
if (this.wrapper === undefined) {
const factory
= this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent);
this.wrapper = this.viewContainerRef.createComponent(factory);
this.wrapper = this.viewContainerRef.createComponent(ContextHelpWrapperComponent);
}
this.wrapper.instance.templateRef = this.templateRef;
this.wrapper.instance.content = this.dsContextHelp.content;
this.wrapper.instance.id = this.dsContextHelp.id;
this.wrapper.instance.tooltipPlacement = this.dsContextHelp.tooltipPlacement;
this.wrapper.instance.iconPlacement = this.dsContextHelp.iconPlacement;
this.wrapper.setInput('templateRef', this.templateRef);
this.wrapper.setInput('content', this.dsContextHelp.content);
this.wrapper.setInput('id', this.dsContextHelp.id);
this.wrapper.setInput('tooltipPlacement', this.dsContextHelp.tooltipPlacement);
this.wrapper.setInput('iconPlacement', this.dsContextHelp.iconPlacement);
}
ngOnDestroy() {
this.clearMostRecentId();
if (hasValue(this.wrapper)) {
this.wrapper.destroy();
this.wrapper = undefined;
}
}
private clearMostRecentId(): void {