Skip to content

Commit 480c7a6

Browse files
alexandrevryghemalexandrevryghem
committed
Destroy dynamically generated components in onDestroy & replace deprecated createComponent
1 parent ca86437 commit 480c7a6

7 files changed

Lines changed: 88 additions & 57 deletions

File tree

‎src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ComponentFactoryResolver, ElementRef, OnInit, ViewChild } from '@angular/core';
1+
import { Component, ElementRef, OnInit, ViewChild, ComponentRef, OnDestroy } from '@angular/core';
22
import { Item } from '../../../../../core/shared/item.model';
33
import { ViewMode } from '../../../../../core/shared/view-mode.model';
44
import {
@@ -13,6 +13,7 @@ import { BitstreamDataService } from '../../../../../core/data/bitstream-data.se
1313
import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
1414
import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
1515
import { ThemeService } from '../../../../../shared/theme-support/theme.service';
16+
import { hasValue } from '../../../../../shared/empty.util';
1617

1718
@listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
1819
@Component({
@@ -23,15 +24,16 @@ import { ThemeService } from '../../../../../shared/theme-support/theme.service'
2324
/**
2425
* The component for displaying a list element for an item search result on the admin search page
2526
*/
26-
export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnInit {
27+
export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnDestroy, OnInit {
2728
@ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
2829
@ViewChild('badges', { static: true }) badges: ElementRef;
2930
@ViewChild('buttons', { static: true }) buttons: ElementRef;
3031

32+
protected compRef: ComponentRef<Component>;
33+
3134
constructor(protected truncatableService: TruncatableService,
3235
protected bitstreamDataService: BitstreamDataService,
3336
private themeService: ThemeService,
34-
private componentFactoryResolver: ComponentFactoryResolver
3537
) {
3638
super(truncatableService, bitstreamDataService);
3739
}
@@ -41,23 +43,32 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
4143
*/
4244
ngOnInit(): void {
4345
super.ngOnInit();
44-
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent());
46+
const component: GenericConstructor<Component> = this.getComponent();
4547

4648
const viewContainerRef = this.listableObjectDirective.viewContainerRef;
4749
viewContainerRef.clear();
4850

49-
const componentRef = viewContainerRef.createComponent(
50-
componentFactory,
51-
0,
52-
undefined,
53-
[
54-
[this.badges.nativeElement],
55-
[this.buttons.nativeElement]
56-
]);
57-
(componentRef.instance as any).object = this.object;
58-
(componentRef.instance as any).index = this.index;
59-
(componentRef.instance as any).linkType = this.linkType;
60-
(componentRef.instance as any).listID = this.listID;
51+
this.compRef = viewContainerRef.createComponent(
52+
component, {
53+
index: 0,
54+
injector: undefined,
55+
projectableNodes: [
56+
[this.badges.nativeElement],
57+
[this.buttons.nativeElement],
58+
],
59+
},
60+
);
61+
(this.compRef.instance as any).object = this.object;
62+
(this.compRef.instance as any).index = this.index;
63+
(this.compRef.instance as any).linkType = this.linkType;
64+
(this.compRef.instance as any).listID = this.listID;
65+
}
66+
67+
ngOnDestroy(): void {
68+
if (hasValue(this.compRef)) {
69+
this.compRef.destroy();
70+
this.compRef = undefined;
71+
}
6172
}
6273

6374
/**

‎src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
1+
import { Component, ElementRef, ViewChild, ComponentRef, OnDestroy, OnInit } from '@angular/core';
22
import { Item } from '../../../../../core/shared/item.model';
33
import { ViewMode } from '../../../../../core/shared/view-mode.model';
44
import {
@@ -23,6 +23,7 @@ import {
2323
import { take } from 'rxjs/operators';
2424
import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
2525
import { ThemeService } from '../../../../../shared/theme-support/theme.service';
26+
import { hasValue } from '../../../../../shared/empty.util';
2627

2728
@listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
2829
@Component({
@@ -33,7 +34,7 @@ import { ThemeService } from '../../../../../shared/theme-support/theme.service'
3334
/**
3435
* The component for displaying a grid element for an workflow item on the admin workflow search page
3536
*/
36-
export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkflowItemSearchResult, WorkflowItem> {
37+
export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkflowItemSearchResult, WorkflowItem> implements OnDestroy, OnInit {
3738
/**
3839
* Directive used to render the dynamic component in
3940
*/
@@ -54,8 +55,9 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
5455
*/
5556
public item$: Observable<Item>;
5657

58+
protected compRef: ComponentRef<Component>;
59+
5760
constructor(
58-
private componentFactoryResolver: ComponentFactoryResolver,
5961
private linkService: LinkService,
6062
protected truncatableService: TruncatableService,
6163
private themeService: ThemeService,
@@ -73,28 +75,37 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
7375
this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
7476
this.item$ = (this.dso.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
7577
this.item$.pipe(take(1)).subscribe((item: Item) => {
76-
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
78+
const component: GenericConstructor<Component> = this.getComponent(item);
7779

7880
const viewContainerRef = this.listableObjectDirective.viewContainerRef;
7981
viewContainerRef.clear();
8082

81-
const componentRef = viewContainerRef.createComponent(
82-
componentFactory,
83-
0,
84-
undefined,
85-
[
86-
[this.badges.nativeElement],
87-
[this.buttons.nativeElement]
88-
]);
89-
(componentRef.instance as any).object = item;
90-
(componentRef.instance as any).index = this.index;
91-
(componentRef.instance as any).linkType = this.linkType;
92-
(componentRef.instance as any).listID = this.listID;
93-
componentRef.changeDetectorRef.detectChanges();
83+
this.compRef = viewContainerRef.createComponent(
84+
component, {
85+
index: 0,
86+
injector: undefined,
87+
projectableNodes: [
88+
[this.badges.nativeElement],
89+
[this.buttons.nativeElement],
90+
],
91+
},
92+
);
93+
(this.compRef.instance as any).object = item;
94+
(this.compRef.instance as any).index = this.index;
95+
(this.compRef.instance as any).linkType = this.linkType;
96+
(this.compRef.instance as any).listID = this.listID;
97+
this.compRef.changeDetectorRef.detectChanges();
9498
}
9599
);
96100
}
97101

102+
ngOnDestroy(): void {
103+
if (hasValue(this.compRef)) {
104+
this.compRef.destroy();
105+
this.compRef = undefined;
106+
}
107+
}
108+
98109
/**
99110
* Fetch the component depending on the item's entity type, view mode and context
100111
* @returns {GenericConstructor<Component>}

‎src/app/shared/loading/themed-loading.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core';
1+
import { Component, Input, ChangeDetectorRef } from '@angular/core';
22
import { ThemedComponent } from '../theme-support/themed.component';
33
import { LoadingComponent } from './loading.component';
44
import { ThemeService } from '../theme-support/theme.service';
@@ -20,11 +20,10 @@ export class ThemedLoadingComponent extends ThemedComponent<LoadingComponent> {
2020
protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage', 'spinner'];
2121

2222
constructor(
23-
protected resolver: ComponentFactoryResolver,
2423
protected cdr: ChangeDetectorRef,
2524
protected themeService: ThemeService
2625
) {
27-
super(resolver, cdr, themeService);
26+
super(cdr, themeService);
2827
}
2928

3029
protected getComponentName(): string {

‎src/app/shared/metadata-representation/metadata-representation-loader.component.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ComponentFactoryResolver, Inject, Input, OnInit, ViewChild } from '@angular/core';
1+
import { Component, Inject, Input, OnInit, ViewChild, ComponentRef, OnDestroy } from '@angular/core';
22
import {
33
MetadataRepresentation,
44
MetadataRepresentationType
@@ -19,8 +19,9 @@ import { ThemeService } from '../theme-support/theme.service';
1919
/**
2020
* Component for determining what component to use depending on the item's entity type (dspace.entity.type), its metadata representation and, optionally, its context
2121
*/
22-
export class MetadataRepresentationLoaderComponent implements OnInit {
22+
export class MetadataRepresentationLoaderComponent implements OnDestroy, OnInit {
2323
private componentRefInstance: MetadataRepresentationListElementComponent;
24+
protected compRef: ComponentRef<MetadataRepresentationListElementComponent>;
2425

2526
/**
2627
* The item or metadata to determine the component for
@@ -47,7 +48,6 @@ export class MetadataRepresentationLoaderComponent implements OnInit {
4748
@ViewChild(MetadataRepresentationDirective, {static: true}) mdRepDirective: MetadataRepresentationDirective;
4849

4950
constructor(
50-
private componentFactoryResolver: ComponentFactoryResolver,
5151
private themeService: ThemeService,
5252
@Inject(METADATA_REPRESENTATION_COMPONENT_FACTORY) private getMetadataRepresentationComponent: (entityType: string, mdRepresentationType: MetadataRepresentationType, context: Context, theme: string) => GenericConstructor<any>,
5353
) {
@@ -57,16 +57,23 @@ export class MetadataRepresentationLoaderComponent implements OnInit {
5757
* Set up the dynamic child component
5858
*/
5959
ngOnInit(): void {
60-
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent());
60+
const component: GenericConstructor<MetadataRepresentationListElementComponent> = this.getComponent();
6161

6262
const viewContainerRef = this.mdRepDirective.viewContainerRef;
6363
viewContainerRef.clear();
6464

65-
const componentRef = viewContainerRef.createComponent(componentFactory);
66-
this.componentRefInstance = componentRef.instance as MetadataRepresentationListElementComponent;
65+
this.compRef = viewContainerRef.createComponent(component);
66+
this.componentRefInstance = this.compRef.instance as MetadataRepresentationListElementComponent;
6767
this.componentRefInstance.metadataRepresentation = this.mdRepresentation;
6868
}
6969

70+
ngOnDestroy(): void {
71+
if (hasValue(this.compRef)) {
72+
this.compRef.destroy();
73+
this.compRef = undefined;
74+
}
75+
}
76+
7077
/**
7178
* Fetch the component depending on the item's entity type, metadata representation type and context
7279
* @returns {string}

‎src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import {
22
Component,
3-
ComponentFactoryResolver,
43
EventEmitter,
54
Input,
65
OnDestroy,
76
OnInit,
87
Output,
9-
ViewChild
8+
ViewChild, ComponentRef
109
} from '@angular/core';
1110
import { getComponentByWorkflowTaskOption } from './claimed-task-actions-decorator';
1211
import { ClaimedTask } from '../../../../core/tasks/models/claimed-task-object.model';
@@ -64,8 +63,7 @@ export class ClaimedTaskActionsLoaderComponent implements OnInit, OnDestroy {
6463
*/
6564
protected subs: Subscription[] = [];
6665

67-
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
68-
}
66+
protected compRef: ComponentRef<Component>;
6967

7068
/**
7169
* Fetch, create and initialize the relevant component
@@ -74,13 +72,11 @@ export class ClaimedTaskActionsLoaderComponent implements OnInit, OnDestroy {
7472

7573
const comp = this.getComponentByWorkflowTaskOption(this.option);
7674
if (hasValue(comp)) {
77-
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
78-
7975
const viewContainerRef = this.claimedTaskActionsDirective.viewContainerRef;
8076
viewContainerRef.clear();
8177

82-
const componentRef = viewContainerRef.createComponent(componentFactory);
83-
const componentInstance = (componentRef.instance as ClaimedTaskActionsAbstractComponent);
78+
this.compRef = viewContainerRef.createComponent(comp);
79+
const componentInstance = (this.compRef.instance as ClaimedTaskActionsAbstractComponent);
8480
componentInstance.item = this.item;
8581
componentInstance.object = this.object;
8682
componentInstance.workflowitem = this.workflowitem;
@@ -98,6 +94,10 @@ export class ClaimedTaskActionsLoaderComponent implements OnInit, OnDestroy {
9894
* Unsubscribe from open subscriptions
9995
*/
10096
ngOnDestroy(): void {
97+
if (hasValue(this.compRef)) {
98+
this.compRef.destroy();
99+
this.compRef = undefined;
100+
}
101101
this.subs
102102
.filter((subscription) => hasValue(subscription))
103103
.forEach((subscription) => subscription.unsubscribe());

‎src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { getListableObjectComponent } from './listable-object.decorator';
2323
import { GenericConstructor } from '../../../../core/shared/generic-constructor';
2424
import { ListableObjectDirective } from './listable-object.directive';
2525
import { CollectionElementLinkType } from '../../collection-element-link.type';
26-
import { hasValue, isNotEmpty } from '../../../empty.util';
26+
import { hasValue, isNotEmpty, hasNoValue } from '../../../empty.util';
2727
import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
2828
import { ThemeService } from '../../../theme-support/theme.service';
2929

@@ -141,7 +141,9 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnChanges
141141
* Setup the dynamic child component
142142
*/
143143
ngOnInit(): void {
144-
this.instantiateComponent(this.object);
144+
if (hasNoValue(this.compRef)) {
145+
this.instantiateComponent(this.object);
146+
}
145147
}
146148

147149
/**
@@ -153,7 +155,11 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnChanges
153155
}
154156
}
155157

156-
ngOnDestroy() {
158+
ngOnDestroy(): void {
159+
if (hasValue(this.compRef)) {
160+
this.compRef.destroy();
161+
this.compRef = undefined;
162+
}
157163
this.subs
158164
.filter((subscription) => hasValue(subscription))
159165
.forEach((subscription) => subscription.unsubscribe());

‎src/app/shared/theme-support/themed.component.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
SimpleChanges,
77
OnInit,
88
OnDestroy,
9-
ComponentFactoryResolver,
109
ChangeDetectorRef,
1110
OnChanges
1211
} from '@angular/core';
@@ -31,7 +30,6 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
3130
protected inAndOutputNames: (keyof T & keyof this)[] = [];
3231

3332
constructor(
34-
protected resolver: ComponentFactoryResolver,
3533
protected cdr: ChangeDetectorRef,
3634
protected themeService: ThemeService
3735
) {
@@ -87,8 +85,7 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
8785
}
8886
}),
8987
).subscribe((constructor: GenericConstructor<T>) => {
90-
const factory = this.resolver.resolveComponentFactory(constructor);
91-
this.compRef = this.vcr.createComponent(factory);
88+
this.compRef = this.vcr.createComponent(constructor);
9289
this.connectInputsAndOutputs();
9390
this.cdr.markForCheck();
9491
});

0 commit comments

Comments
 (0)