]>
Commit | Line | Data |
---|---|---|
2539932e C |
1 | import { |
2 | ApplicationRef, | |
2539932e | 3 | ComponentRef, |
41cde76b | 4 | createComponent, |
2539932e C |
5 | EmbeddedViewRef, |
6 | Injectable, | |
7 | Injector, | |
8 | OnChanges, | |
9 | SimpleChange, | |
10 | SimpleChanges, | |
11 | Type | |
12 | } from '@angular/core' | |
54909304 | 13 | import { objectKeysTyped } from '@shared/core-utils' |
2539932e C |
14 | |
15 | @Injectable() | |
16 | export class DynamicElementService { | |
17 | ||
18 | constructor ( | |
19 | private injector: Injector, | |
41cde76b | 20 | private applicationRef: ApplicationRef |
2539932e C |
21 | ) { } |
22 | ||
23 | createElement <T> (ofComponent: Type<T>) { | |
24 | const div = document.createElement('div') | |
25 | ||
41cde76b C |
26 | const component = createComponent(ofComponent, { |
27 | environmentInjector: this.applicationRef.injector, | |
28 | elementInjector: this.injector, | |
29 | hostElement: div | |
30 | }) | |
2539932e C |
31 | |
32 | return component | |
33 | } | |
34 | ||
35 | injectElement <T> (wrapper: HTMLElement, componentRef: ComponentRef<T>) { | |
36 | const hostView = componentRef.hostView as EmbeddedViewRef<any> | |
37 | ||
38 | this.applicationRef.attachView(hostView) | |
39 | wrapper.appendChild(hostView.rootNodes[0]) | |
40 | } | |
41 | ||
42 | setModel <T> (componentRef: ComponentRef<T>, attributes: Partial<T>) { | |
43 | const changes: SimpleChanges = {} | |
44 | ||
54909304 | 45 | for (const key of objectKeysTyped(attributes)) { |
2539932e C |
46 | const previousValue = componentRef.instance[key] |
47 | const newValue = attributes[key] | |
48 | ||
49 | componentRef.instance[key] = newValue | |
54909304 | 50 | changes[key as string] = new SimpleChange(previousValue, newValue, previousValue === undefined) |
2539932e C |
51 | } |
52 | ||
53 | const component = componentRef.instance | |
54 | if (typeof (component as unknown as OnChanges).ngOnChanges === 'function') { | |
55 | (component as unknown as OnChanges).ngOnChanges(changes) | |
56 | } | |
57 | ||
58 | componentRef.changeDetectorRef.detectChanges() | |
59 | } | |
60 | } |