I have a modal component with this html template:
<div class="modal">
<div class="modal-body">
<ng-content></ng-content>
</div>
<div class="modal-footer">
<button (click)="sendMessage()">success</button>
<button (click)="close()">abort</button>
</div>
</div>
I have an ng-content where I pass a Component in an open function defined into a service:
export class ModalService {
dialogComponentRef: ComponentRef<ModalComponent>;
private subject = new Subject<any>();
open(content: any, obj: any) {
const contentComponentFactory = this.cfResolver.resolveComponentFactory(content);
const modalComponentFactory = this.cfResolver.resolveComponentFactory(ModalComponent);
const contentComponent = contentComponentFactory.create(this.injector);
const modalComponent = modalComponentFactory.create(this.injector,[[contentComponent.location.nativeElement]]);
modalComponent.instance.model = obj;
this.dialogComponentRef = modalComponent;
document.body.appendChild(modalComponent.location.nativeElement);
this.appRef.attachView(contentComponent.hostView);
this.appRef.attachView(modalComponent.hostView);
}
sendMessage() {
this.subject.next();
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
close() {
this.appRef.detachView(this.dialogComponentRef.hostView);
}
constructor(
private appRef: ApplicationRef,
private cfResolver: ComponentFactoryResolver,
private injector: Injector
) {}
}
I need to use these modals several times. When I close the button I need to destroy the contentComponent. I see that when I subscribe to sendMessage on the click "SUCCESS" button I see that all the components that I opened subscribed to this next function.
Example, I have this situation. In more than one of my contentComponents I have these subscriptions:
this.mySubscription = this.modalService.getMessage().subscribe( () => {
doing things;
)};
and in the ngOnDestroy I did
this.mySubscription.unsubscribe()
but on the close button nothing happens, I continue subscribing from modal that I just closed. How can I solve this issue?
I think, I have an idea to solve your problem. To destroy contentComponent you just need to write contentComponent.destroy();
. However, the thing is how do your ModalService get the information that Modal is closed. For that you can use an EventEmitter like @Output() closeModal: EventEmitter<any> = new EventEmitter<any>();
. Finally, you have to subscribe that event like contentComponent.instance.closeModal.subscribe(() => this.removeDynamicComponent(component));
when you open a new modal in your ModalService, and removeDynamicComponent is a method where you will write contentComponent.destroy();
.
Here, I have similar type of modal example in StackBlitz: Link
Please Check the code and let me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.