API-Referenz

Hier ist der vollständige Vertrag für portal: 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 portal mit 15 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`animation`	`boolean`	—	Wenn true, werden das Öffnen und Schließen des Portals animiert. Standard: true
`ariaLabelledBy`	`string`	—	`aria-labelledby`-Attributwert, der am Portal-Fenster gesetzt wird
`ariaDescribedBy`	`string`	—	`aria-describedby`-Attributwert, der am Portal-Fenster gesetzt wird
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	Callback unmittelbar bevor das Portal verworfen wird. Gib false zurück, um das Verwerfen zu verhindern.
`container`	`string \| HTMLElement`	—	Ein Selektor, der das Element angibt, an das alle neuen Portal-Fenster angehängt werden sollen. Wenn nicht angegeben, ist es `body`.
`injector`	`Injector`	—	Der `Injector`, der für den Portal-Inhalt verwendet wird, um Dependency Injection zu ermöglichen.
`keyboard`	`boolean`	—	Wenn true, wird das Portal geschlossen, wenn die Escape-Taste gedrückt wird. Standard: true
`scrollable`	`boolean`	—	Scrollbarer Portal-Inhalt (standardmäßig false).
`windowClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Portal-Fenster für individuelles Styling und Positionierung angehängt wird.
`portalDialogClass`	`string`	—	Eine benutzerdefinierte Klasse, die an den Portal-Dialog-Container angehängt wird.
`portalContentClass`	`string`	—	Eine benutzerdefinierte Klasse, die an den Portal-Inhalts-Wrapper angehängt wird.
`headerSelector`	`string`	—	Benutzerdefinierter Selektor für das Header-Element des Portal-Fensters. Nützlich, um bestimmte Portal-Abschnitte anzusprechen.
`footerSelector`	`string`	—	Benutzerdefinierter Selektor für das Footer-Element des Portal-Fensters. Nützlich, um bestimmte Portal-Abschnitte anzusprechen.
`dismissSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Verwerfen des Portal-Fensters auslösen können. Standard: `[data-dismiss="portal"]`
`closeSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Schließen des Portal-Fensters auslösen können. Standard: `[data-close="portal"]`

Outputs

Noch keine Outputs dokumentiert.

Methoden

Steuere portal aus dem Code heraus — 5 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`HubPortal.open`	`open<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Öffnet ein neues Portal-Fenster mit dem angegebenen Inhalt (Komponententyp, TemplateRef oder String) und den Optionen und gibt eine HubPortalRef zu seiner Steuerung zurück. Inhaltskomponenten können HubActivePortal injizieren, um das Portal von innen zu schließen oder zu verwerfen.
`HubPortal.toggle`	`toggle<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Verwirft alle aktuell offenen Portale mit dem Grund 'toggle', wartet, bis sie vollständig verborgen sind, und zeigt dann ein neues Portal mit dem angegebenen Inhalt und den Optionen. Gibt die Referenz auf das neue Portal zurück.
`HubPortal.dismissAll`	`dismissAll(reason?: any): void`	—	Verwirft alle aktuell angezeigten Portal-Fenster mit dem übergebenen Grund.
`HubPortal.hasOpenPortals`	`hasOpenPortals(): boolean`	`boolean`	Gibt an, ob in der Anwendung aktuell offene Portal-Fenster vorhanden sind.
`HubPortal.activeInstances`	`activeInstances: EventEmitter<HubPortalRef[]>`	`EventEmitter<HubPortalRef[]>`	Event-Emitter, der bei jedem Öffnen oder Entfernen eines Portals die Liste der aktuell offenen HubPortalRef-Instanzen ausgibt.

Templates

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

Name	Beschreibung	Beispiel
`Portal Template`	Template-Referenz, die an den HubPortal-Service für dynamisches Rendern übergeben werden kann	`<ng-template #portalTemplate> <div class="portal-content"> <div class="portal-header"> <h4>Portal Title</h4> <button data-dismiss="portal">×</button> </div> <div class="portal-body"> Portal content goes here </div> <div class="portal-footer"> <button data-dismiss="portal">Cancel</button> <button data-close="portal">OK</button> </div> </div> </ng-template> <!-- Open the portal --> <button (click)="portal.open(portalTemplate)">Open Portal</button>`