Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 9a011f3

Browse filesBrowse files
maxokorokovmaxokorokov
committed
fix: replace ComponentFactory with new createComponent API
Fixes #4343
1 parent b251b5c commit 9a011f3
Copy full SHA for 9a011f3

File tree

Expand file treeCollapse file tree

4 files changed

+51
-60
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+51
-60
lines changed

‎src/modal/modal-stack.ts

Copy file name to clipboardExpand all lines: src/modal/modal-stack.ts
+22-24Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
/* eslint-disable deprecation/deprecation */
21
import {DOCUMENT} from '@angular/common';
32
import {
43
ApplicationRef,
5-
ComponentFactoryResolver,
64
ComponentRef,
5+
createComponent,
76
EventEmitter,
87
Inject,
98
Injectable,
109
Injector,
1110
NgZone,
1211
RendererFactory2,
13-
TemplateRef
12+
TemplateRef,
13+
Type
1414
} from '@angular/core';
1515
import {Subject} from 'rxjs';
1616

@@ -66,8 +66,7 @@ export class NgbModalStack {
6666
}
6767
}
6868

69-
open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options: NgbModalOptions):
70-
NgbModalRef {
69+
open(contentInjector: Injector, content: any, options: NgbModalOptions): NgbModalRef {
7170
const containerEl = options.container instanceof HTMLElement ? options.container : isDefined(options.container) ?
7271
this._document.querySelector(options.container) :
7372
this._document.body;
@@ -80,12 +79,11 @@ export class NgbModalStack {
8079
this._hideScrollBar();
8180

8281
const activeModal = new NgbActiveModal();
83-
const contentRef =
84-
this._getContentRef(moduleCFR, options.injector || contentInjector, content, activeModal, options);
82+
const contentRef = this._getContentRef(options.injector || contentInjector, content, activeModal, options);
8583

8684
let backdropCmptRef: ComponentRef<NgbModalBackdrop>| undefined =
87-
options.backdrop !== false ? this._attachBackdrop(moduleCFR, containerEl) : undefined;
88-
let windowCmptRef: ComponentRef<NgbModalWindow> = this._attachWindowComponent(moduleCFR, containerEl, contentRef);
85+
options.backdrop !== false ? this._attachBackdrop(containerEl) : undefined;
86+
let windowCmptRef: ComponentRef<NgbModalWindow> = this._attachWindowComponent(containerEl, contentRef.nodes);
8987
let ngbModalRef: NgbModalRef = new NgbModalRef(windowCmptRef, contentRef, backdropCmptRef, options.beforeDismiss);
9088

9189
this._registerModalRef(ngbModalRef);
@@ -124,18 +122,18 @@ export class NgbModalStack {
124122

125123
hasOpenModals(): boolean { return this._modalRefs.length > 0; }
126124

127-
private _attachBackdrop(moduleCFR: ComponentFactoryResolver, containerEl: any): ComponentRef<NgbModalBackdrop> {
128-
let backdropFactory = moduleCFR.resolveComponentFactory(NgbModalBackdrop);
129-
let backdropCmptRef = backdropFactory.create(this._injector);
125+
private _attachBackdrop(containerEl: Element): ComponentRef<NgbModalBackdrop> {
126+
let backdropCmptRef = createComponent(
127+
NgbModalBackdrop, {environmentInjector: this._applicationRef.injector, elementInjector: this._injector});
130128
this._applicationRef.attachView(backdropCmptRef.hostView);
131129
containerEl.appendChild(backdropCmptRef.location.nativeElement);
132130
return backdropCmptRef;
133131
}
134132

135-
private _attachWindowComponent(moduleCFR: ComponentFactoryResolver, containerEl: any, contentRef: any):
136-
ComponentRef<NgbModalWindow> {
137-
let windowFactory = moduleCFR.resolveComponentFactory(NgbModalWindow);
138-
let windowCmptRef = windowFactory.create(this._injector, contentRef.nodes);
133+
private _attachWindowComponent(containerEl: Element, projectableNodes: Node[][]): ComponentRef<NgbModalWindow> {
134+
let windowCmptRef = createComponent(
135+
NgbModalWindow,
136+
{environmentInjector: this._applicationRef.injector, elementInjector: this._injector, projectableNodes});
139137
this._applicationRef.attachView(windowCmptRef.hostView);
140138
containerEl.appendChild(windowCmptRef.location.nativeElement);
141139
return windowCmptRef;
@@ -158,7 +156,7 @@ export class NgbModalStack {
158156
}
159157

160158
private _getContentRef(
161-
moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, activeModal: NgbActiveModal,
159+
contentInjector: Injector, content: Type<any>| TemplateRef<any>| string, activeModal: NgbActiveModal,
162160
options: NgbModalOptions): ContentRef {
163161
if (!content) {
164162
return new ContentRef([]);
@@ -167,17 +165,17 @@ export class NgbModalStack {
167165
} else if (isString(content)) {
168166
return this._createFromString(content);
169167
} else {
170-
return this._createFromComponent(moduleCFR, contentInjector, content, activeModal, options);
168+
return this._createFromComponent(contentInjector, content, activeModal, options);
171169
}
172170
}
173171

174-
private _createFromTemplateRef(content: TemplateRef<any>, activeModal: NgbActiveModal): ContentRef {
172+
private _createFromTemplateRef(templateRef: TemplateRef<any>, activeModal: NgbActiveModal): ContentRef {
175173
const context = {
176174
$implicit: activeModal,
177175
close(result) { activeModal.close(result); },
178176
dismiss(reason) { activeModal.dismiss(reason); }
179177
};
180-
const viewRef = content.createEmbeddedView(context);
178+
const viewRef = templateRef.createEmbeddedView(context);
181179
this._applicationRef.attachView(viewRef);
182180
return new ContentRef([viewRef.rootNodes], viewRef);
183181
}
@@ -188,12 +186,12 @@ export class NgbModalStack {
188186
}
189187

190188
private _createFromComponent(
191-
moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, context: NgbActiveModal,
189+
contentInjector: Injector, componentType: Type<any>, context: NgbActiveModal,
192190
options: NgbModalOptions): ContentRef {
193-
const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
194-
const modalContentInjector =
191+
const elementInjector =
195192
Injector.create({providers: [{provide: NgbActiveModal, useValue: context}], parent: contentInjector});
196-
const componentRef = contentCmptFactory.create(modalContentInjector);
193+
const componentRef =
194+
createComponent(componentType, {environmentInjector: this._applicationRef.injector, elementInjector});
197195
const componentNativeEl = componentRef.location.nativeElement;
198196
if (options.scrollable) {
199197
(componentNativeEl as HTMLElement).classList.add('component-host-scrollable');

‎src/modal/modal.ts

Copy file name to clipboardExpand all lines: src/modal/modal.ts
+3-6Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
/* eslint-disable deprecation/deprecation */
2-
import {Injectable, Injector, ComponentFactoryResolver} from '@angular/core';
1+
import {Injectable, Injector} from '@angular/core';
32

43
import {NgbModalOptions, NgbModalConfig} from './modal-config';
54
import {NgbModalRef} from './modal-ref';
@@ -13,9 +12,7 @@ import {NgbModalStack} from './modal-stack';
1312
*/
1413
@Injectable({providedIn: 'root'})
1514
export class NgbModal {
16-
constructor(
17-
private _moduleCFR: ComponentFactoryResolver, private _injector: Injector, private _modalStack: NgbModalStack,
18-
private _config: NgbModalConfig) {}
15+
constructor(private _injector: Injector, private _modalStack: NgbModalStack, private _config: NgbModalConfig) {}
1916

2017
/**
2118
* Opens a new modal window with the specified content and supplied options.
@@ -28,7 +25,7 @@ export class NgbModal {
2825
*/
2926
open(content: any, options: NgbModalOptions = {}): NgbModalRef {
3027
const combinedOptions = {...this._config, animation: this._config.animation, ...options};
31-
return this._modalStack.open(this._moduleCFR, this._injector, content, combinedOptions);
28+
return this._modalStack.open(this._injector, content, combinedOptions);
3229
}
3330

3431
/**

‎src/offcanvas/offcanvas-stack.ts

Copy file name to clipboardExpand all lines: src/offcanvas/offcanvas-stack.ts
+23-25Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
/* eslint-disable deprecation/deprecation */
21
import {DOCUMENT} from '@angular/common';
32
import {
43
ApplicationRef,
5-
ComponentFactoryResolver,
64
ComponentRef,
5+
createComponent,
76
EventEmitter,
87
Inject,
98
Injectable,
109
Injector,
1110
NgZone,
12-
TemplateRef
11+
TemplateRef,
12+
Type
1313
} from '@angular/core';
1414
import {finalize} from 'rxjs/operators';
1515
import {Subject} from 'rxjs';
@@ -58,8 +58,7 @@ export class NgbOffcanvasStack {
5858
}
5959
}
6060

61-
open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options: NgbOffcanvasOptions):
62-
NgbOffcanvasRef {
61+
open(contentInjector: Injector, content: any, options: NgbOffcanvasOptions): NgbOffcanvasRef {
6362
const containerEl = options.container instanceof HTMLElement ? options.container : isDefined(options.container) ?
6463
this._document.querySelector(options.container) :
6564
this._document.body;
@@ -72,11 +71,11 @@ export class NgbOffcanvasStack {
7271
}
7372

7473
const activeOffcanvas = new NgbActiveOffcanvas();
75-
const contentRef = this._getContentRef(moduleCFR, options.injector || contentInjector, content, activeOffcanvas);
74+
const contentRef = this._getContentRef(options.injector || contentInjector, content, activeOffcanvas);
7675

7776
let backdropCmptRef: ComponentRef<NgbOffcanvasBackdrop>| undefined =
78-
options.backdrop !== false ? this._attachBackdrop(moduleCFR, containerEl) : undefined;
79-
let panelCmptRef: ComponentRef<NgbOffcanvasPanel> = this._attachWindowComponent(moduleCFR, containerEl, contentRef);
77+
options.backdrop !== false ? this._attachBackdrop(containerEl) : undefined;
78+
let panelCmptRef: ComponentRef<NgbOffcanvasPanel> = this._attachWindowComponent(containerEl, contentRef.nodes);
8079
let ngbOffcanvasRef: NgbOffcanvasRef =
8180
new NgbOffcanvasRef(panelCmptRef, contentRef, backdropCmptRef, options.beforeDismiss);
8281

@@ -102,18 +101,18 @@ export class NgbOffcanvasStack {
102101

103102
hasOpenOffcanvas(): boolean { return !!this._offcanvasRef; }
104103

105-
private _attachBackdrop(moduleCFR: ComponentFactoryResolver, containerEl: any): ComponentRef<NgbOffcanvasBackdrop> {
106-
let backdropFactory = moduleCFR.resolveComponentFactory(NgbOffcanvasBackdrop);
107-
let backdropCmptRef = backdropFactory.create(this._injector);
104+
private _attachBackdrop(containerEl: Element): ComponentRef<NgbOffcanvasBackdrop> {
105+
let backdropCmptRef = createComponent(
106+
NgbOffcanvasBackdrop, {environmentInjector: this._applicationRef.injector, elementInjector: this._injector});
108107
this._applicationRef.attachView(backdropCmptRef.hostView);
109108
containerEl.appendChild(backdropCmptRef.location.nativeElement);
110109
return backdropCmptRef;
111110
}
112111

113-
private _attachWindowComponent(moduleCFR: ComponentFactoryResolver, containerEl: any, contentRef: any):
114-
ComponentRef<NgbOffcanvasPanel> {
115-
let panelFactory = moduleCFR.resolveComponentFactory(NgbOffcanvasPanel);
116-
let panelCmptRef = panelFactory.create(this._injector, contentRef.nodes);
112+
private _attachWindowComponent(containerEl: Element, projectableNodes: Node[][]): ComponentRef<NgbOffcanvasPanel> {
113+
let panelCmptRef = createComponent(
114+
NgbOffcanvasPanel,
115+
{environmentInjector: this._applicationRef.injector, elementInjector: this._injector, projectableNodes});
117116
this._applicationRef.attachView(panelCmptRef.hostView);
118117
containerEl.appendChild(panelCmptRef.location.nativeElement);
119118
return panelCmptRef;
@@ -136,7 +135,7 @@ export class NgbOffcanvasStack {
136135
}
137136

138137
private _getContentRef(
139-
moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
138+
contentInjector: Injector, content: Type<any>| TemplateRef<any>| string,
140139
activeOffcanvas: NgbActiveOffcanvas): ContentRef {
141140
if (!content) {
142141
return new ContentRef([]);
@@ -145,17 +144,17 @@ export class NgbOffcanvasStack {
145144
} else if (isString(content)) {
146145
return this._createFromString(content);
147146
} else {
148-
return this._createFromComponent(moduleCFR, contentInjector, content, activeOffcanvas);
147+
return this._createFromComponent(contentInjector, content, activeOffcanvas);
149148
}
150149
}
151150

152-
private _createFromTemplateRef(content: TemplateRef<any>, activeOffcanvas: NgbActiveOffcanvas): ContentRef {
151+
private _createFromTemplateRef(templateRef: TemplateRef<any>, activeOffcanvas: NgbActiveOffcanvas): ContentRef {
153152
const context = {
154153
$implicit: activeOffcanvas,
155154
close(result) { activeOffcanvas.close(result); },
156155
dismiss(reason) { activeOffcanvas.dismiss(reason); }
157156
};
158-
const viewRef = content.createEmbeddedView(context);
157+
const viewRef = templateRef.createEmbeddedView(context);
159158
this._applicationRef.attachView(viewRef);
160159
return new ContentRef([viewRef.rootNodes], viewRef);
161160
}
@@ -165,13 +164,12 @@ export class NgbOffcanvasStack {
165164
return new ContentRef([[component]]);
166165
}
167166

168-
private _createFromComponent(
169-
moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
170-
context: NgbActiveOffcanvas): ContentRef {
171-
const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
172-
const offcanvasContentInjector =
167+
private _createFromComponent(contentInjector: Injector, componentType: Type<any>, context: NgbActiveOffcanvas):
168+
ContentRef {
169+
const elementInjector =
173170
Injector.create({providers: [{provide: NgbActiveOffcanvas, useValue: context}], parent: contentInjector});
174-
const componentRef = contentCmptFactory.create(offcanvasContentInjector);
171+
const componentRef =
172+
createComponent(componentType, {environmentInjector: this._applicationRef.injector, elementInjector});
175173
const componentNativeEl = componentRef.location.nativeElement;
176174
this._applicationRef.attachView(componentRef.hostView);
177175
return new ContentRef([[componentNativeEl]], componentRef.hostView, componentRef);

‎src/offcanvas/offcanvas.ts

Copy file name to clipboardExpand all lines: src/offcanvas/offcanvas.ts
+3-5Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
/* eslint-disable deprecation/deprecation */
2-
import {ComponentFactoryResolver, Injectable, Injector} from '@angular/core';
1+
import {Injectable, Injector} from '@angular/core';
32
import {NgbOffcanvasConfig, NgbOffcanvasOptions} from './offcanvas-config';
43
import {NgbOffcanvasRef} from './offcanvas-ref';
54
import {NgbOffcanvasStack} from './offcanvas-stack';
@@ -15,8 +14,7 @@ import {NgbOffcanvasStack} from './offcanvas-stack';
1514
@Injectable({providedIn: 'root'})
1615
export class NgbOffcanvas {
1716
constructor(
18-
private _moduleCFR: ComponentFactoryResolver, private _injector: Injector,
19-
private _offcanvasStack: NgbOffcanvasStack, private _config: NgbOffcanvasConfig) {}
17+
private _injector: Injector, private _offcanvasStack: NgbOffcanvasStack, private _config: NgbOffcanvasConfig) {}
2018

2119
/**
2220
* Opens a new offcanvas panel with the specified content and supplied options.
@@ -30,7 +28,7 @@ export class NgbOffcanvas {
3028
*/
3129
open(content: any, options: NgbOffcanvasOptions = {}): NgbOffcanvasRef {
3230
const combinedOptions = {...this._config, animation: this._config.animation, ...options};
33-
return this._offcanvasStack.open(this._moduleCFR, this._injector, content, combinedOptions);
31+
return this._offcanvasStack.open(this._injector, content, combinedOptions);
3432
}
3533

3634
/**

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.