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; } }