1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { Injectable, Type, ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injector } from '@angular/core';
import { ViewContainerRef } from '@angular/core/src/linker/view_container_ref';
@Injectable()
export class CreateDynamicComponentService {
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private applicationRef: ApplicationRef,
private injector: Injector) {
}
/**
* Gets the root view container to inject the component to.
*
* @returns {ComponentRef<any>}
*
* @memberOf InjectionService
*/
private getRootViewContainer(): ComponentRef<any> {
const rootComponents = this.applicationRef['_rootComponents']; // Angular2
// const rootComponents = this.applicationRef['components']; // Angular5
if (rootComponents.length) {
return rootComponents[0];
}
throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
}
/**
* Gets the html element for a component ref.
*
* @param {ComponentRef<any>} componentRef
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
}
/**
* Gets the root component container html element.
*
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
private getRootViewContainerNode(): HTMLElement {
return this.getComponentRootNode(this.getRootViewContainer());
}
/**
* Projects the inputs onto the component
*
* @param {ComponentRef<any>} component
* @param {*} options
* @returns {ComponentRef<any>}
*
* @memberOf InjectionService
*/
private projectComponentInputs(component: ComponentRef<any>, options: any): ComponentRef<any> {
if (options) {
const props = Object.getOwnPropertyNames(options);
for (const prop of props) {
component.instance[prop] = options[prop];
}
}
return component;
}
public createComponentDynamically<T>(componentClass: Type<T>, options: any = {}, location: Element = this.getRootViewContainerNode()): ComponentRef<any> {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const componentRef = componentFactory.create(this.injector);
const componentRootNode = this.getComponentRootNode(componentRef);
// project the options passed to the component instance
this.projectComponentInputs(componentRef, options);
this.applicationRef.attachView(componentRef.hostView);
componentRef.onDestroy(() => {
this.applicationRef.detachView(componentRef.hostView);
});
location.appendChild(componentRootNode);
return componentRef;
}
/**
* Inserts a component into an existing viewContainer
* @param componentType - type of component to create
* @param options - Inputs to project on new component
* @param vcRef - viewContainerRef in which to insert the newly created component
*/
public insertComponentDynamically<T>(componentType: Type<T>, options: any = {}, vcRef: ViewContainerRef): ComponentRef<any> {
const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
const dynamicComponent = factory.create(vcRef.parentInjector);
this.projectComponentInputs(dynamicComponent, options);
vcRef.insert(dynamicComponent.hostView);
return dynamicComponent;
}
}
|
