typescript - Hvordan lukke den eksisterende ngx-modal når en ny modal åpnes fra samme komponent i Angular 8

Jeg prøver å lage en gjenbrukbar modal-komponent som kan kalles fra den samme modalen selv.

Hvordan kan jeg konfigurere komponenten og modalen slik at når den gjenbrukbare komponenten åpnes, vil den eldre instansen bli lukket umiddelbart?

Nedenfor er min stackblitz.

https://stackblitz.com/edit/angular-nested-component-modal-ngx-bootstrap-n

Svar #1

Jeg ville brukt ett modalt hjelpeverb...

Her er strategien

  1. Ha modalen på app-komponenten
  2. Lag en tjeneste som vil kommunisere når brukeren ønsker å åpne en ny modal
  3. Fra hver av komponentknappene, kall tjenesten

La oss begynne med å definere vår Tjeneste

min.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject, Subject } from "rxjs";

interface IModalParams {
  component: any;
  config?: any;
  title?: any;
}
@Injectable()
export class MyService {
  modalOpen$ = new BehaviorSubject(false);
  component;
  config;
  title;
  show({ component, config, title }: IModalParams) {
    this.component = component;
    this.config = config;
    this.title = title;
    this.modalOpen$.next(true);
  }
}

Så vi har definert en show-metode som vil sette noen variabler (component, configuration og title)

Vi har også definert et subject modalOpen$. Nå vil enhver egenskap som abonnerer på dette bli informert når en bruker har åpnet en ny modal

app.component.ts

  ngOnInit() {
    this.myService.modalOpen$.pipe(
      tap(() => this.modalRef?.hide()),
      filter(isOpen => isOpen)
    ).subscribe({
      next: () => {
        const {component, config, title} = this.myService
          this.modalRef = this.modalService.show(component, config);
          if(title) {
            this.modalRef.content.title = title; 
          }
      }
    })
  }

Her abonnerer vi på modalOpen$ og åpner eller lukker komponenten som er levert

any-other.component.ts

 this.myService.show({
     component: ModalContentComponent,
     config: {
      ignoreBackdropClick: false
    },
    title: "Modal with component"
   })
  }

I andre komponenter kan vi nå bruke vår show-metode som spesifisert ovenfor

Se demo her

Relaterte artikler