Ngx-Axis-Appforge

基于 Angular 20 和 Ant Design 开发的 JSON 驱动动态页面生成库，完整覆盖 Ant Design 组件，并提供低代码配置组件的设计工具（本身也是动态组件之一）。本库旨在帮助开发者快速构建复杂的管理界面，通过可视化配置即可实现组件布局和属性设置。

特性

• 基于最新技术：采用 Angular 20 和 ng-zorro-antd（Ant Design 的 Angular 实现）
• 全面的组件覆盖：封装并优化了大部分 Ant Design 组件，提供统一的配置接口
• JSON 驱动开发：通过 JSON 配置文件动态生成页面结构和组件
• 低代码设计工具：内置可视化设计器，支持拖拽式组件配置，该设计工具本身也是动态组件之一
• 灵活的数据绑定：支持双向数据绑定和事件处理，轻松集成业务逻辑
• 可扩展性强：提供清晰的接口和工具，方便开发者扩展自定义组件

安装

npm install ngx-axis-appforge
npm install ng-zorro-antd
npm install ngx-clipboard
npm install monaco-editor

配置

在 angular.json 中进行以下配置：

1. 在 assets 中添加：

{
  "glob": "**/*",
  "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
  "output": "/assets/"
},
{
  "glob": "**/*",
  "input": "./node_modules/monaco-editor/min/vs",
  "output": "/assets/vs/"
},
{
  "glob": "**/*",
  "input": "./node_modules/ngx-axis-appforge/components-covers",
  "output": "/assets/components-covers/"
}

2. 在 styles 中添加：

"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"

3. 在 app.config.ts 中添加：

provideHttpClient(),
provideAxisComponents(),
provideAnimationsAsync(),
provideNzConfig({
  codeEditor: {
    assetsRoot: `http://localhost:4200/assets`
  },
}),

使用

HTML 模板

<ng-container [axisDynamic]="options()" [ngModel]="designValue"></ng-container>

TypeScript 示例

options = signal({
  component: "design",
  inuse: true
});

designValue = {
  component: "text",
  id: "text",
  inuse: true,
  data: "hello axis appforge"
};

使用说明

1. axisDynamic 指令：这是本库的核心功能之一，接受一个 JSON 格式的数据作为输入，自动根据 JSON 内容动态生成相应的组件。JSON 数据的格式描述了组件类型、属性、布局等信息。

2. 双向数据绑定：对于有值的组件（如 input 输入框），可以通过 ngModel 进行双向数据绑定。当组件内容发生变化时，绑定的数据会自动更新；反之，数据变化也会反映在组件上。

3. design 组件：这个组件是本库提供的可视化设计工具，允许开发者通过拖拽等方式搭建复杂页面。它会输出一个 JSON 数据，这个数据可以直接作为 axisDynamic 指令的输入，实现页面的动态生成。这意味着开发者无需手动编写 JSON 数据，而是通过可视化操作来创建页面结构。

功能概述

本库主要提供两个核心功能：

1. JSON 驱动的动态页面生成功能：通过解析 JSON 配置，动态创建包含各种 Ant Design 组件的复杂页面。开发者只需提供一个描述页面结构和组件属性的 JSON 对象，即可在指定位置渲染出完整的 UI 界面。

2. 低代码配置组件的设计工具：提供可视化的设计器，支持拖拽式组件布局和属性配置。这个设计工具本身也是通过本库的动态组件功能实现的，展示了库的强大灵活性和可扩展性。

技术栈

• 框架: Angular v20.0.0
• UI 库: ng-zorro-antd (Ant Design 的 Angular 实现)
• 构建工具: Angular CLI v20.0.0
• 语言: TypeScript (~5.8.2)