syncfusion-angular-common

Syncfusion Angular 组件的常见功能

Syncfusion Angular 组件包含全面的通用实用工具和功能，可提升用户体验、确保跨文化支持，并为所有组件提供基础功能。本技能涵盖安装设置、动画、全球化、状态管理和安全注意事项，帮助你构建稳健的 Angular 应用。

目录

• 导航指南
• 快速入门
• 常见功能

文档与导航指南

入门与框架设置

📄 阅读： references/getting-started.md

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

全球化

📄 阅读： references/globalization.md

• 支持阿拉伯语、希伯来语和波斯语的从右向左（RTL）布局
• 多语言支持的本地化（l10n）
• 使用 CLDR 数据进行国际化（i18n）
• 数字和货币格式设置
• 日期和时间格式设置

高级功能与实用工具

📄 阅读： references/advanced-features.md

• 动画效果（FadeIn、ZoomOut、SlideUp 等）
• 动画时序（持续时间、延迟、全局设置）
• 拖放交互（Draggable、Droppable）
• 模板自定义与优化
• 使用 enablePersistence 持久化状态
• 安全最佳实践与 HTML 清理

快速入门

安装 Syncfusion Angular 包

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

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

安装主题包并导入样式

首先，安装所需的 Tailwind 3 主题包，使用以下命令：

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

接下来，将所需样式导入样式表：

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

注册许可证密钥

步骤 1： 设置环境变量：

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

步骤 2： 使用 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"
>
  
</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);
      }
    });
  }
}