syncfusion-angular-dialog

用途

Syncfusion Angular Dialog 组件用于在 Angular 应用中实现对话框（Dialog）。对话框是一种向用户展示信息并获取用户输入的窗口，支持模态（阻塞父级交互）与非模态（允许父级交互）两种模式。该技能提供完整的 API 覆盖，帮助开发者构建模态/非模态对话框、确认弹窗、对话框内表单、可拖动与可调整大小的对话框等。

主要能力

模态与非模态模式：模态对话框阻塞父级交互，非模态对话框允许父级交互，并支持在两种模式间切换。
模板：可自定义头部、内容与底部，内容支持字符串、HTML 或 ng-template，底部支持按钮绑定与动态按钮数组。
定位：提供 9 种内置位置（如顶部、居中、底部等），也支持通过 X、Y 坐标自定义定位。
动画：提供平滑的打开/关闭效果，如 Fade、Zoom、Slide 等。
拖动与调整大小：允许用户移动和调整对话框尺寸。
表单集成：支持响应式表单与模板驱动表单，并可通过 FormValidator 进行表单验证。
无障碍：完整支持 WCAG 2.2 Level AA，包含 ARIA 属性（aria-labelledby、aria-describedby、aria-modal、aria-grabbed 等）。
键盘导航：支持 Tab、Shift+Tab、Escape、Enter 及方向键。
响应式：在移动设备上支持全屏模式。
样式与主题：支持 CSS 类自定义（头部、内容、底部、遮罩层）、主题集成（Material、Bootstrap、Tailwind、Fluent）、深色模式、图标自定义与 RTL（从右到左）语言支持。
事件与交互：提供打开/关闭事件、拖动、调整大小、按钮点击、生命周期事件、焦点管理与阻止对话框关闭等能力。
高级模式：支持嵌套对话框、Ajax 动态加载内容、程序化创建工具函数、复杂布局（富文本编辑器、多步表单）、滚动处理与自动居中、自定义事件发射器、路由集成模式。

使用方式

该技能以参考文档与代码示例的形式组织，按需查阅对应文件：

入门：references/getting-started.md（Angular 21+ 安装与设置、基本对话框实现、CSS 导入与主题、打开与关闭、内置按钮支持）
模式与类型：references/modal-vs-modeless.md
内容与模板：references/templates-and-content.md
定位与尺寸：references/positioning-and-sizing.md
样式与自定义：references/styling-and-customization.md
无障碍与表单：references/accessibility-and-forms.md
交互与事件：references/interaction-and-events.md
高级模式：references/advanced-patterns.md
API 参考：api-reference.md（完整属性、方法 show/hide/refresh/destroy、事件 beforeOpen/beforeClose/drag/resize 等、接口与模型、枚举、官方文档链接）

快速开始示例（打开基本模态对话框）：

import { Component, ViewChild } from '@angular/core';
import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-root',
  imports: [DialogModule],
  template: `
    <div id="dialog-container" style="height: 500px;">
      <button class="e-control e-btn" (click)="onOpenDialog()">
        Open Dialog
      </button>
      
      <ejs-dialog 
        #ejDialog
        target="#dialog-container"
        [showCloseIcon]="true"
        width="400px"
        content="This is a Dialog content"
      >
        <ng-template #header>
          <div class="e-dlg-header-content">
            <span>Dialog Title</span>
          </div>
        </ng-template>
      </ejs-dialog>
    </div>
  `
})
export class AppComponent {
  @ViewChild('ejDialog') ejDialog!: DialogComponent;

  onOpenDialog(): void {
    this.ejDialog.show();
  }
}

CSS：

#dialog-container {
  height: 500px;
}

常见模式示例：

模态确认对话框：

<ejs-dialog 
  [isModal]="true"
  [showCloseIcon]="true"
  width="350px"
  content="Are you sure you want to delete this item?"
>
  <ng-template #footer>
    <button class="e-control e-btn e-primary" (click)="onConfirm()">
      Yes, Delete
    </button>
    <button class="e-control e-btn" (click)="onCancel()">
      Cancel
    </button>
  </ng-template>
</ejs-dialog>

含响应式表单的对话框：

<ejs-dialog [showCloseIcon]="true" width="450px">
  <form [formGroup]="form">
    <div class="e-dlg-content">
      <input formControlName="name" placeholder="Enter name" />
      <input formControlName="email" placeholder="Enter email" />
    </div>
  </form>
  
  <ng-template #footer>
    <button class="e-control e-btn e-primary" (click)="onSubmit()">
      Submit
    </button>
  </ng-template>
</ejs-dialog>

指定位置的对话框：

<ejs-dialog 
  [position]="{ X: 100, Y: 50 }"
  width="400px"
  content="Positioned Dialog"
>
</ejs-dialog>

关键属性速查：

isModal（boolean）：阻塞父级交互，示例 [isModal]="true"
showCloseIcon（boolean）：在头部显示关闭按钮，示例 [showCloseIcon]="true"
width（string | number）：设置对话框宽度，示例 width="400px"
height（string | number）：设置对话框高度，示例 height="300px"
minHeight（string | number）：最小高度约束，示例 [minHeight]="200"
position（PositionDataModel）：设置位置（X、Y）或预设，示例 [position]="{ X: 'center', Y: 'center' }"
target（HTMLElement | string）：设置容器元素，示例 target="#container"
content（string | HTMLElement）：设置内容文本或 HTML，示例 content="Hello"
header（string | HTMLElement）：设置头部文本或元素，示例 header="Title"
buttons（ButtonPropsModel[]）：添加底部按钮，示例 [buttons]="buttonArray"
closeOnEscape（boolean）：按 Escape 键关闭，示例 [closeOnEscape]="true"
allowDragging（boolean）：启用头部拖动，示例 [allowDragging]="true"
enableResize（boolean）：启用调整大小，示例 [enableResize]="true"
resizeHandles（ResizeDirections[]）：指定调整大小的方向，示例 [resizeHandles]="['All']"
cssClass（string）：自定义 CSS 类，示例 cssClass="custom-dialog"
animationSettings（AnimationSettingsModel）：配置动画，示例 [animationSettings]="{ effect: 'FadeZoom' }"
enablePersistence（boolean）：在重新加载之间保存状态，示例 [enablePersistence]="true"
zIndex（number）：分层顺序，示例 [zIndex]="1000"

适用场景

删除前确认：模态对话框询问用户确认删除
表单提交：对话框内表单供用户提交数据
警报与通知：向用户展示重要信息
多步流程：使用嵌套对话框处理工作流
设置面板：非模态对话框用于不阻塞交互的设置
帮助与引导：在可拖动对话框中展示帮助内容
加载状态：处理过程中在对话框内显示进度
错误处理：在模态框中显示错误消息

限制

资料未提供该组件的收费、价格、平台限制或性能边界等具体信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制