syncfusion-angular-common

用途

本技能面向在 Angular 应用中使用 Syncfusion UI 组件的开发者，汇总各组件的通用工具与特性，用于统一实现动画、拖放、状态持久化、全球化与安全处理，保证跨文化支持与一致的基础能力。

主要能力

入门与框架配置

Angular CLI 安装与项目创建
独立组件（Standalone components）与基于模块的配置对比
使用 ng add 命令安装 npm 包
ASP.NET Core 与 ASP.NET MVC 集成
组件初始化与快速入门示例

全球化

从右到左（RTL）支持，面向阿拉伯语、希伯来语、波斯语
本地化（l10n）实现多语言支持
国际化（i18n）与 CLDR 数据
数字与货币格式化
日期与时间格式化

高级特性与实用工具

动画效果（FadeIn、ZoomOut、SlideUp 等）
动画时间控制（duration、delay、全局设置）
拖放交互（Draggable、Droppable）
模板定制与优化
通过 enablePersistence 实现状态持久化
安全最佳实践与 HTML 清理

使用方式

安装 Syncfusion Angular 包

ng add @syncfusion/ej2-angular-grids@latest

注意：@syncfusion/ej2-base 是所有 Syncfusion 组件的依赖，安装任意 Syncfusion Angular 包时会自动安装，无需在 package.json 中显式添加。

安装主题包并导入样式

npm install @syncfusion/ej2-tailwind3-theme --save

在样式表中导入：

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

注册许可证密钥

设置环境变量：

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

使用 NPX 命令激活：

npx syncfusion-license activate

其他许可证注册方式可参考 Syncfusion 许可证密钥注册文档。

基本组件设置

import { Component } from '@angular/core';
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule],
  providers: [PageService],
  template: `
    <ejs-grid [dataSource]="data" [allowPaging]="true">
      <e-columns>
        <e-column field="OrderID" width="100"></e-column>
        <e-column field="CustomerID" width="100"></e-column>
        <e-column field="Freight" width="100" format="C2"></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class AppComponent {
  data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];
}

启用状态持久化

<ejs-grid 
  id="persistGrid"
  [dataSource]="data" 
  [enablePersistence]="true"
>
  <!-- Component content -->
</ejs-grid>

启用 RTL 支持

import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

// OR per-component
<ejs-grid [dataSource]="data" enableRtl="true"></ejs-grid>

添加动画效果

import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({
  template: `<div #element class="box"></div>`
})
export class AnimationComponent {
  @ViewChild('element') element!: any;

  ngAfterViewInit() {
    const animation = new Animation({ duration: 5000, delay: 2000 });
    animation.animate(this.element.nativeElement, { name: 'FadeOut' });
  }
}

实现拖放

import { Component, ViewChild } from '@angular/core';
import { Draggable, Droppable } from '@syncfusion/ej2-base';

@Component({
  template: `
    <div #draggable id="draggable">Drag me</div>
    <div #droppable id="droppable">Drop here</div>
  `
})
export class DragDropComponent {
  @ViewChild('draggable') draggable!: any;
  @ViewChild('droppable') droppable!: any;

  ngAfterViewInit() {
    new Draggable(this.draggable.nativeElement, { clone: false });
    
    new Droppable(this.droppable.nativeElement, {
      drop: (e) => {
        console.log('Dropped!', e.droppedElement);
      }
    });
  }
}

适用场景

在 Angular 项目中集成 Syncfusion UI 组件，并需要统一处理动画、拖放、状态持久化等通用能力时
需要为面向多语言市场的 Angular 应用添加 RTL、本地化与国际化的支持时
需要实现数字、货币、日期时间等跨区域格式化时
需要为组件实现拖放交互或状态保持时
需要依据安全最佳实践处理 HTML 清理时

限制

关于各功能的完整参数细节、各框架版本的兼容性范围、性能上限及具体业务约束，资料未提供，暂未提供。动画与拖放等特性在不同组件中的支持程度亦未给出详细说明。