API-Referenz

Hier ist der vollständige Vertrag für modal: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle modal mit 14 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`animation`	`boolean`	—	Wenn true, werden das Öffnen und Schließen des Modals animiert. Standard: true
`backdrop`	`boolean \| "static"`	—	Wenn true, wird das Backdrop-Element erstellt. Alternativ kann "static" für ein Backdrop angegeben werden, das das Modal beim Klicken nicht schließt. Standard: true
`centered`	`boolean`	—	Wenn true, wird das Modal vertikal zentriert. Standard: false
`placement`	`HubModalPlacement`	—	Steuert, wo das Modal im Viewport platziert wird. Standard: HubModalPlacement.Center
`keyboard`	`boolean`	—	Wenn true, wird das Modal geschlossen, wenn die Escape-Taste gedrückt wird. Standard: true
`closeOnNavigation`	`boolean`	—	Wenn true, wird das Modal geschlossen, wenn der Benutzer im Browserverlauf zurücknavigiert (history.back(), Zurück-Schaltfläche des Browsers). Standard: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Größe des Modal-Fensters
`windowClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Modal-Fenster angehängt wird
`backdropClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Modal-Backdrop angehängt wird
`dismissSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Verwerfen des Modalfensters auslösen können. Standard: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Schließen des Modalfensters auslösen können. Standard: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Benutzerdefinierter Selektor für das Header-Element des Modal-Fensters
`footerSelector`	`string`	—	Benutzerdefinierter Selektor für das Footer-Element des Modal-Fensters
`data`	`any`	—	Zusätzliche Daten, die an das Modal-Fenster übergeben werden müssen, wenn es geöffnet wird

Outputs

Reagiere darauf, was modal tut — 1 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`dismiss`	`any`	Wird vom Modal-Fenster ausgelöst, wenn der Benutzer das Modal verwirft, z. B. durch Drücken von Escape, Klick auf das Backdrop oder Betätigen der eingebauten Schließen-Schaltfläche. Die Payload ist der Verwerfungsgrund (ModalDismissReasons.ESC, ModalDismissReasons.BACKDROP_CLICK oder ein benutzerdefinierter Wert).

Methoden

Steuere modal aus dem Code heraus — 17 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	Öffnet ein neues Modal-Fenster mit dem angegebenen Inhalt (Komponententyp, TemplateRef oder String) und den Optionen und gibt eine HubModalRef zu seiner Steuerung zurück. Inhaltskomponenten können HubActiveModal und das HUB_MODAL_DATA-Token injizieren, um mit dem Modal zu interagieren und die Daten-Payload zu lesen.
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	Verwirft alle aktuell angezeigten Modal-Fenster mit dem übergebenen Grund.
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	Gibt an, ob in der Anwendung aktuell offene Modal-Fenster vorhanden sind.
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	Event-Emitter, der bei jedem Öffnen oder Entfernen eines Modals die Liste der aktuell offenen HubModalRef-Instanzen ausgibt.
`HubModalRef.close`	`close(result?: R): void`	—	Schließt das Modal mit einem optionalen Ergebniswert. Das HubModalRef.result-Promise wird mit dem übergebenen Wert aufgelöst.
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	Verwirft das Modal mit einem optionalen Grund. Das HubModalRef.result-Promise wird mit dem übergebenen Wert abgelehnt. Beachtet den beforeDismiss-Guard, sofern einer konfiguriert wurde.
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	Aktualisiert Optionen eines geöffneten Modals (aria-Attribute, centered, placement, fullscreen, backdropClass, size, variant, windowClass, modalDialogClass).
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	Die Instanz der Komponente, die als Modal-Inhalt verwendet wird. Gibt undefined zurück, wenn ein TemplateRef als Inhalt verwendet wurde oder das Modal geschlossen ist.
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	Promise, das beim Schließen des Modals mit dem Schließergebnis aufgelöst und beim Verwerfen mit dem Verwerfungsgrund abgelehnt wird.
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable, das beim Schließen des Modals das an close() übergebene Ergebnis ausgibt.
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable, das beim Verwerfen des Modals den Verwerfungsgrund ausgibt — den an dismiss() übergebenen Wert oder einen internen Grund wie Backdrop-Klick oder Escape.
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable, das ausgibt und abschließt, sobald das Modal vollständig sichtbar und seine Öffnungsanimation beendet ist.
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable, das ausgibt und abschließt, sobald Modal-Fenster und Backdrop verborgen, die Animationen beendet und ihre Elemente aus dem DOM entfernt sind.
`HubActiveModal.close`	`close(result?: R): void`	—	Schließt das Modal, das die Inhaltskomponente beherbergt, und löst das HubModalRef.result-Promise mit dem optionalen Ergebniswert auf.
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	Verwirft das Modal, das die Inhaltskomponente beherbergt, und lehnt das HubModalRef.result-Promise mit dem optionalen Grund ab.
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	Aktualisiert Optionen des geöffneten Modals aus dem Inneren der Inhaltskomponente.
`HubActiveModal.data`	`data: D`	`D`	Die typisierte Payload, die über HubModalOptions.data übergeben wird. Entspricht dem Injizieren des HUB_MODAL_DATA-Tokens; ergibt null, wenn keine data-Option angegeben wurde.

Templates

Mach es zu deinem — 1 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`Modal Template`	Template-Referenz, die an den Modal-Service übergeben werden kann	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`