From bcdcdbb8c444b8343428015c9feeebb7afc28974 Mon Sep 17 00:00:00 2001
From: Aliullov Vlad <91639107+GoodDayForSurf@users.noreply.github.com>
Date: Tue, 10 Sep 2024 23:09:14 +0400
Subject: [PATCH] Angular: Extract DxPopupServiceComponent type (#27992)
---
.../devextreme-angular/src/ui/popup/index.ts | 2 +-
.../src/ui/popup/service/service.component.ts | 39 +++++++++++--------
.../src/ui/popup/service/service.ts | 30 +++++++-------
3 files changed, 39 insertions(+), 32 deletions(-)
diff --git a/packages/devextreme-angular/src/ui/popup/index.ts b/packages/devextreme-angular/src/ui/popup/index.ts
index 8c2d357bcff4..9357376a9b3b 100644
--- a/packages/devextreme-angular/src/ui/popup/index.ts
+++ b/packages/devextreme-angular/src/ui/popup/index.ts
@@ -1,2 +1,2 @@
export * from './component';
-export { DxPopupService } from './service/service';
+export { DxPopupService, DxPopupServiceComponent } from './service/service';
diff --git a/packages/devextreme-angular/src/ui/popup/service/service.component.ts b/packages/devextreme-angular/src/ui/popup/service/service.component.ts
index 5c789f078a40..1affb5b9a36e 100644
--- a/packages/devextreme-angular/src/ui/popup/service/service.component.ts
+++ b/packages/devextreme-angular/src/ui/popup/service/service.component.ts
@@ -2,10 +2,10 @@ import {
AfterViewInit,
Component, ComponentRef,
ElementRef,
- EventEmitter, Inject,
+ Inject,
NgZone,
- Output, PLATFORM_ID,
- TransferState,
+ PLATFORM_ID,
+ TransferState, Type,
ViewChild,
} from '@angular/core';
import {
@@ -14,7 +14,7 @@ import {
NestedOptionHost,
WatcherHelper,
} from 'devextreme-angular/core';
-import { DxPopupComponent } from '../component';
+import { DxPopupComponent, DxPopupTypes } from '../component';
import { DxServicePopupInsertionDirective } from './insertion.directive';
@Component({
@@ -28,28 +28,33 @@ import { DxServicePopupInsertionDirective } from './insertion.directive';
],
template: '',
})
-export class DxServicePopupComponent extends DxPopupComponent implements AfterViewInit {
+export class PopupServiceComponent extends DxPopupComponent implements AfterViewInit {
@ViewChild(DxServicePopupInsertionDirective) contentInsertion: DxServicePopupInsertionDirective;
- @Output() afterViewInit$: EventEmitter = new EventEmitter();
-
- contentRef: ComponentRef;
+ contentRef: ComponentRef;
constructor(
- elementRef: ElementRef,
- ngZone: NgZone,
- templateHost: DxTemplateHost,
- _watcherHelper: WatcherHelper,
- _idh: IterableDifferHelper,
- optionHost: NestedOptionHost,
- transferState: TransferState,
- @Inject(PLATFORM_ID) platformId: any,
+ @Inject('popupServiceContentComponent') private contentComponent: Type,
+ @Inject('popupServiceOptions') private popupOptions: DxPopupTypes.Properties,
+ elementRef: ElementRef,
+ ngZone: NgZone,
+ templateHost: DxTemplateHost,
+ _watcherHelper: WatcherHelper,
+ _idh: IterableDifferHelper,
+ optionHost: NestedOptionHost,
+ transferState: TransferState,
+ @Inject(PLATFORM_ID) platformId: any,
) {
super(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId);
}
ngAfterViewInit() {
super.ngAfterViewInit();
- this.afterViewInit$.emit();
+
+ if(this.popupOptions) {
+ this.instance.option(this.popupOptions)
+ }
+
+ this.contentRef = this.contentInsertion?.viewContainerRef.createComponent(this.contentComponent);
}
}
diff --git a/packages/devextreme-angular/src/ui/popup/service/service.ts b/packages/devextreme-angular/src/ui/popup/service/service.ts
index 66defe45bb41..3188cc058e27 100644
--- a/packages/devextreme-angular/src/ui/popup/service/service.ts
+++ b/packages/devextreme-angular/src/ui/popup/service/service.ts
@@ -6,8 +6,10 @@ import {
EmbeddedViewRef,
ComponentRef, Type,
} from '@angular/core';
-import { DxPopupTypes } from '../component';
-import { DxServicePopupComponent } from './service.component';
+import { DxPopupComponent, DxPopupTypes } from '../component';
+import { PopupServiceComponent } from './service.component';
+
+export type DxPopupServiceComponent = DxPopupComponent & { contentRef: ComponentRef }
@Injectable({
providedIn: 'root',
@@ -19,22 +21,22 @@ export class DxPopupService {
private readonly componentFactoryResolver: ComponentFactoryResolver,
) {}
- open(contentComponent: Type, popupOptions?: DxPopupTypes.Properties) {
- const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DxServicePopupComponent);
- const componentRef: ComponentRef = componentFactory.create(this.injector);
+ open(contentComponent: Type, popupOptions?: DxPopupTypes.Properties): DxPopupServiceComponent {
+ const componentFactory = this.componentFactoryResolver.resolveComponentFactory(PopupServiceComponent);
+ const serviceInjector = Injector.create({
+ providers: [
+ { provide: 'popupServiceContentComponent', useValue: contentComponent },
+ { provide: 'popupServiceOptions', useValue: popupOptions },
+ ],
+ parent: this.injector
+ });
+ const componentRef = componentFactory.create(serviceInjector);
const cmpInstance = componentRef.instance;
cmpInstance.onHidden.subscribe(() => {
this.applicationRef.detachView(componentRef.hostView);
- componentRef.destroy();
- });
-
- cmpInstance.afterViewInit$.subscribe(() => {
- if (popupOptions) {
- cmpInstance.instance.option(popupOptions);
- }
- componentRef.instance.contentRef = cmpInstance.contentInsertion?.viewContainerRef.createComponent(contentComponent);
+ componentRef.destroy();
});
this.applicationRef.attachView(componentRef.hostView);
@@ -47,6 +49,6 @@ export class DxPopupService {
this.applicationRef.tick();
- return componentRef.instance as (typeof componentRef.instance & { contentRef: ComponentRef });
+ return componentRef.instance;
}
}