Angular Portal 与 Overlay 渲染 | ng-hub-ui-portal

Angular portal 库,可在当前 DOM 树之外动态渲染组件、模板和 overlay,并支持定位控制。

交互式示例

探索实时示例,了解该库在常见 Angular 用例中的表现。

组件渲染

Component Rendering

Demonstrate how to open a portal with a Component class and access its instance for data manipulation.

TemplateRef 渲染

TemplateRef Rendering

Demonstrate how to use ng-template to define portal content with context variables.

字符串内容

String Content Rendering

Demonstrate how to render simple string or HTML content directly in a portal.

数据传递

Data Passing

Demonstrate how to inject custom data into portal components using Angular's Injector.

内容投影

Content Projection

Demonstrate how to use ng-content slots for header/footer projection and custom selectors in portal content.

渐进式打开(堆叠)

Progressive Open (Stacked Portals)

Demonstrate how multiple portals can be opened progressively, each stacking on top of the previous one with proper z-index management.

Active Portals: 0

切换(互斥)

Toggle (Exclusive Mode)

Demonstrate how toggle() closes any existing portal before opening a new one, ensuring only one portal is active at a time.

Active Portal: None

基础用法(旧版)

Basic Portal Usage

Demonstrates fundamental portal capabilities including Modals, Tooltips, and Notifications using the HubPortal service.

Portal Controls

Content is rendered dynamically into the DOM (typically body) using the HubPortal service, completely detaching it from this component's DOM hierarchy while preserving Angular context.

高级定位(旧版)

Portal - Posicionamiento Avanzado

Ejemplos de posicionamiento dinámico y conectado con diferentes estrategias.

Configuración de Posicionamiento
Elementos de Referencia
Top LeftEsquina superior izquierda
Top RightEsquina superior derecha
CenterElemento central
Bottom LeftEsquina inferior izquierda
Bottom RightEsquina inferior derecha
Targets de Portal
Target 1
Target 2
Target 3
Configuración Actual
Posición: absolute
Target: body
Offset: X: 0px, Y: 0px
Backdrop: No

服务与注入(旧版)

Portal - Servicio y Gestión Programática

Creación y gestión de portales usando servicios para casos de uso avanzados.

Gestión Programática de Portales
Notificaciones Toast
Modales Dinámicos
Overlays Complejos
Gestión Global
Estado del Sistema de Portales
Portales Activos:0
Último Portal:Ninguno
Z-Index Actual:1000
Auto-increment ID:1