sring-template-outlet.directive.ts
4.17 KB
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
///
/// Copyright © 2016-2024 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
import {
Directive,
EmbeddedViewRef,
Input,
OnChanges,
SimpleChange,
SimpleChanges,
TemplateRef,
ViewContainerRef
} from '@angular/core';
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[tbStringTemplateOutlet]',
exportAs: 'tbStringTemplateOutlet'
})
export class TbStringTemplateOutletDirective<_T = unknown> implements OnChanges {
private embeddedViewRef: EmbeddedViewRef<any> | null = null;
private context = new TbStringTemplateOutletContext();
@Input() tbStringTemplateOutletContext: any | null = null;
@Input() tbStringTemplateOutlet: any | TemplateRef<any> = null;
static ngTemplateContextGuard<T>(
// eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle,id-blacklist,id-match
_dir: TbStringTemplateOutletDirective<T>,
// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
_ctx: any
): _ctx is TbStringTemplateOutletContext {
return true;
}
private recreateView(): void {
this.viewContainer.clear();
const isTemplateRef = this.tbStringTemplateOutlet instanceof TemplateRef;
const templateRef = (isTemplateRef ? this.tbStringTemplateOutlet : this.templateRef) as any;
this.embeddedViewRef = this.viewContainer.createEmbeddedView(
templateRef,
isTemplateRef ? this.tbStringTemplateOutletContext : this.context
);
}
private updateContext(): void {
const isTemplateRef = this.tbStringTemplateOutlet instanceof TemplateRef;
const newCtx = isTemplateRef ? this.tbStringTemplateOutletContext : this.context;
const oldCtx = this.embeddedViewRef.context as any;
if (newCtx) {
for (const propName of Object.keys(newCtx)) {
oldCtx[propName] = newCtx[propName];
}
}
}
constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<any>) {}
ngOnChanges(changes: SimpleChanges): void {
const { tbStringTemplateOutletContext, tbStringTemplateOutlet } = changes;
const shouldRecreateView = (): boolean => {
let shouldOutletRecreate = false;
if (tbStringTemplateOutlet) {
if (tbStringTemplateOutlet.firstChange) {
shouldOutletRecreate = true;
} else {
const isPreviousOutletTemplate = tbStringTemplateOutlet.previousValue instanceof TemplateRef;
const isCurrentOutletTemplate = tbStringTemplateOutlet.currentValue instanceof TemplateRef;
shouldOutletRecreate = isPreviousOutletTemplate || isCurrentOutletTemplate;
}
}
const hasContextShapeChanged = (ctxChange: SimpleChange): boolean => {
const prevCtxKeys = Object.keys(ctxChange.previousValue || {});
const currCtxKeys = Object.keys(ctxChange.currentValue || {});
if (prevCtxKeys.length === currCtxKeys.length) {
for (const propName of currCtxKeys) {
if (prevCtxKeys.indexOf(propName) === -1) {
return true;
}
}
return false;
} else {
return true;
}
};
const shouldContextRecreate =
tbStringTemplateOutletContext && hasContextShapeChanged(tbStringTemplateOutletContext);
return shouldContextRecreate || shouldOutletRecreate;
};
if (tbStringTemplateOutlet) {
this.context.$implicit = tbStringTemplateOutlet.currentValue;
}
const recreateView = shouldRecreateView();
if (recreateView) {
this.recreateView();
} else {
this.updateContext();
}
}
}
export class TbStringTemplateOutletContext {
public $implicit: any;
}