Destroy dynamically generated components in onDestroy & replace depre…

…cated createComponent
alexandrevryghem · Dec 28, 2023 · 999a163 · 999a163
1 parent b28e24f
commit 999a163
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/...ment/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts b/...ment/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, ViewChild, OnInit } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, OnDestroy, ComponentRef } from '@angular/core';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, mergeMap, take, tap } from 'rxjs/operators';
@@ -37,6 +37,7 @@ import { SupervisionOrder } from '../../../../../core/supervision-order/models/s
 import { PaginatedList } from '../../../../../core/data/paginated-list.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { hasValue } from '../../../../../shared/empty.util';
 
 @listableObjectComponent(WorkspaceItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -47,7 +48,7 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
 /**
  * The component for displaying a grid element for an workflow item on the admin workflow search page
  */
-export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnInit {
+export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnDestroy, OnInit {
 
   /**
    * The item linked to the workspace item
@@ -79,9 +80,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
    */
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
+  /**
+   * The reference to the dynamic component
+   */
+  protected compRef: ComponentRef<Component>;
+
   constructor(
     public dsoNameService: DSONameService,
-    private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
     private themeService: ThemeService,
@@ -100,24 +105,24 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
     this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
     this.item$ = (this.dso.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
     this.item$.pipe(take(1)).subscribe((item: Item) => {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
+        const component: GenericConstructor<Component> = this.getComponent(item);
 
         const viewContainerRef = this.listableObjectDirective.viewContainerRef;
         viewContainerRef.clear();
 
-        const componentRef = viewContainerRef.createComponent(
-          componentFactory,
-          0,
-          undefined,
-          [
+        this.compRef = viewContainerRef.createComponent(
+          component, {
+          index: 0,
+          projectableNodes: [
             [this.badges.nativeElement],
             [this.buttons.nativeElement]
-          ]);
-        (componentRef.instance as any).object = item;
-        (componentRef.instance as any).index = this.index;
-        (componentRef.instance as any).linkType = this.linkType;
-        (componentRef.instance as any).listID = this.listID;
-        componentRef.changeDetectorRef.detectChanges();
+          ],
+        });
+        this.compRef.setInput('object', item);
+        this.compRef.setInput('index', this.index);
+        this.compRef.setInput('linkType', this.linkType);
+        this.compRef.setInput('listID', this.listID);
+        this.compRef.changeDetectorRef.detectChanges();
       }
     );
 
@@ -130,6 +135,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
     });
   }
 
+  ngOnDestroy(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = undefined;
+    }
+  }
+
   /**
    * Fetch the component depending on the item's entity type, view mode and context
    * @returns {GenericConstructor<Component>}

diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts
@@ -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 {

diff --git a/...low-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.ts b/...low-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ComponentFactoryResolver, OnInit } from '@angular/core';
+import { Component, Input, ViewChild, OnInit, ComponentRef, OnDestroy } from '@angular/core';
 import { hasValue } from '../../../shared/empty.util';
 import {
   getAdvancedComponentByWorkflowTaskOption
@@ -15,7 +15,7 @@ import { PAGE_NOT_FOUND_PATH } from '../../../app-routing-paths';
   templateUrl: './advanced-workflow-actions-loader.component.html',
   styleUrls: ['./advanced-workflow-actions-loader.component.scss'],
 })
-export class AdvancedWorkflowActionsLoaderComponent implements OnInit {
+export class AdvancedWorkflowActionsLoaderComponent implements OnDestroy, OnInit {
 
   /**
    * The name of the type to render
@@ -28,8 +28,12 @@ export class AdvancedWorkflowActionsLoaderComponent implements OnInit {
    */
   @ViewChild(AdvancedWorkflowActionsDirective, { static: true }) claimedTaskActionsDirective: AdvancedWorkflowActionsDirective;
 
+  /**
+   * The reference to the dynamic component
+   */
+  protected compRef: ComponentRef<Component>;
+
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
     private router: Router,
   ) {
   }
@@ -40,16 +44,24 @@ export class AdvancedWorkflowActionsLoaderComponent implements OnInit {
   ngOnInit(): void {
     const comp = this.getComponentByWorkflowTaskOption(this.type);
     if (hasValue(comp)) {
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
-
       const viewContainerRef = this.claimedTaskActionsDirective.viewContainerRef;
       viewContainerRef.clear();
-      viewContainerRef.createComponent(componentFactory);
+      this.compRef = viewContainerRef.createComponent(comp);
     } else {
       void this.router.navigate([PAGE_NOT_FOUND_PATH]);
     }
   }
 
+  /**
+   * Destroy the dynamically created component
+   */
+  ngOnDestroy(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = undefined;
+    }
+  }
+
   getComponentByWorkflowTaskOption(type: string): any {
     return getAdvancedComponentByWorkflowTaskOption(type);
   }