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.
切换(互斥)
Toggle (Exclusive Mode)
Demonstrate how toggle() closes any existing portal before opening a new one, ensuring only one portal is active at a time.
基础用法(旧版)
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
Targets de Portal
Configuración Actual
服务与注入(旧版)
Portal - Servicio y Gestión Programática
Creación y gestión de portales usando servicios para casos de uso avanzados.