angular - Hvordan overføre data fra ModalService til komponent

Jeg prøver å bruke ngx-bootstrap-modal for å sende data fra en modal-tjeneste til en modal-komponent. Eksemplene viser dette:

this.modalService.show(ModalContentComponent, {initialState});

Men det viser ikke hvordan ModalContentComponent faktisk bruker den tilstanden. Jeg har lekt rundt i en debugger og jeg ser aldri at komponenten min får den dataen.

Hvordan får jeg tilgang til det fra komponenten?

Svar #1

Her, i parentComponent hvor initialState-data sendes ved å bruke config-param i modalService.show:

const initialState = {
      data: "Test Data"
    };
    this.modalService.show(ModalContentComponent, {initialState});

Få tilgang til dataene i ModalContentComponent ved å ganske enkelt definere en variabel med akkurat samme navn, dvs. data: string; Du vil kunne få tilgang til verdien av data i ModalContentComponent.html og ModalContentComponent.ts.

Svar #2

På stadiet for å lage en modal, blir hver egenskap fra initialState kopiert til komponenten du sender inn som modalinnhold.

For eksempel, hvis din initialState ser slik ut:

const initialState = {
   list: [
     'Open a modal with component',
     'Pass your data',
     'Do something else',
     '...',
     'PROFIT!!!'
   ],
   title: 'Modal with component',
   closeBtnName: 'Close'
 };

Da kopieres alle disse egenskapene til komponenten for modalinnholdet ditt, og de er tilgjengelige der, og du kan bruke dem i malen din eller ngOnInit som vanlig. Generelt er disse egenskapene som @Input.

Eksempel - https://stackblitz.com/edit/angular-9n2zck?file=app/service-component.ts

Relaterte artikler