当前位置: 首页 > news >正文

DevExtreme Angular UI控件更新:引入全新严格类型配置组件

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

获取DevExtreme v25.1正式版下载

如果您之前使用过 DevExtreme 的 Angular 组件,可能会接触过带有 dxo- 和 dxi- 前缀的配置组件。这些辅助组件简化了控件配置过程,符合 Angular 架构原则,并提升可读性。它们在处理嵌套选项时尤其有用,例如在 dx-data-grid 中使用 dxo-pager 来配置分页选项。

<dx-data-grid [dataSource]="dataSource">
<dxo-pager
[visible]="true"
[showPageSizeSelector]="true" >
</dxo-pager>
</ dx-data-grid>

它们也适用于配置集合项,比如在 dx-toolbar 中使用 dxi-item 声明工具栏项:

<dx-toolbar>
<dxi-item location="before" widget="dxButton" >
</dxi-item>
</dx-toolbar>

下面以 dxi-item 为例,详细讲述旧有配置组件的工作方式。这是一个“通用”组件,不仅仅用于 dx-toolbar,还广泛出现在 Form 和 List 等多个 DevExtreme 组件中。

虽然这提供了统一性(即同一组件可复用),但缺点也很明显:根据父组件的不同,Dxi-item需要完全不同的选项集,这使得精确的输入变得复杂。

下面的屏幕截图说明了IDE如何在两个不同的上下文中为dxi-item显示相同的通用属性列表。例如,form组项的预期属性与甘特图上下文菜单项中使用的属性有很大不同。

DevExtreme Angular UI控件产品更新

我们的核心目标之一是提供完整、健壮的 TypeScript 支持,确保所有DevExtreme组件都严格类型化,并遵循现代 TypeScript 规范。这能改善 IDE 自动补全、早期捕捉错误,并增强重构过程中的信心。

不过,要在现有 dxo- 和 dxi- 组件上强制实施严格类型是一项复杂的挑战。这可能影响大量项目,并在升级到DevExtreme的新版本后引发重大更改。而且,原有配置架构的通用性不利于类型精确化。

全新配置组件:有何变化,为什么重要

在 DevExtreme v24.2 中,官方引入了一套全新的配置组件——它们具备严格类型、可无缝集成到 Angular 应用中,显著提升开发体验。

每个 UI 组件现在都有其专属配置组件集,这标志着在可预测性和类型安全方面向前迈出了重要一步。以下是主要变化及其优势:

更清晰、更能感知上下文的配置组件

配置组件名现在包含了它们的父组件名,这提高了代码的可读性,避免命名冲突,让模板结构更易理解。

例如,以前的 dxi-item 现已改为:

  • dxi-toolbar-item(用于 dx-toolbar)
  • dxi-form-item(用于 dx-form)
  • dxi-context-menu-item(用于 dx-context-menu)

这种命名约定有助于IDE识别组件上下文,并为开发人员提供更清晰的结构视图,使复杂的配置更容易导航和维护。

严格类型与更佳开发体验

新的配置组件现在只包含与其特定父组件相关的属性,这消除了IDE建议一长串不相关选项的情况。例如,dxi-data-grid-column只显示适用于DataGrid列的属性。因此,IDE建议现在更加准确和有用:

DevExtreme Angular UI控件产品更新

大多数新的配置属性都是严格类型化的,未来也会继续完善,这意味着任何对组件API的误用都将在编译期间被捕获(早在它可能导致运行时问题之前)。

DevExtreme Angular UI控件产品更新

后续计划:全面采用新版配置组件

新版配置组件相较旧架构更稳健现代、抗错率更高,并更契合 TypeScript 类型系统。我们将分阶段将整个 DevExtreme Angular 生态切换至此新模型。为了确保用户的平稳和可预测的迁移,请考虑以下时间表/关键里程碑:

DevExtreme v25.1:

  • 所有示例和帮助文档将开始使用新模型;
  • 官方建议所有新的 Angular 应用从一开始就采用新版配置组件;
  • v25.1 引入的所有功能均需使用新的配置组件。

DevExtreme v25.2:

  • 使用旧配置组件将触发弃用警告;
  • 旧系统不再接收新功能,在25.2和以后的版本中引入的任何新功能都需要使用新的配置组件;
  • 官方会提供文档、迁移指南和辅助工具,帮助平滑过渡。

DevExtreme v26.1:

官方将继续支持这些用户迁移到我们的新配置组件,目标是确保用户都拥有顺利完成过渡所需的资源和指导。

DevExtreme v26.2:

所有旧配置组件将从代码库中移除。

官方目标是让过渡过程清晰、可控、安全,严格的类型支持不仅是趋势,更是可扩展、可预测、安全开发的核心。


更多DevExpress线上公开课、中文教程资讯请上中文网获取

http://www.dtcms.com/a/336940.html

相关文章:

  • Kafka的ISR、OSR、AR详解
  • Rust学习笔记(六)|Rust 中的常用集合(Vector、String、HashMap)
  • Linux网络服务(一)——计算机网络参考模型与子网划分
  • 计算机网络:2、TCP和UDP
  • Golang context
  • CentOS 7 LAMP快速部署WordPress指南
  • 云原生Ansible渗透场景(⾃动化的运维⼯具)
  • Ansible企业及实战
  • OVS:除了Geneve和VXLAN,还有哪些虚拟化网络协议?
  • 云计算:企业数字化转型的核心引擎
  • 传统方式部署(RuoYi-Cloud)微服务
  • 一套GoldenGate → Kafka → Flink → MySQL 的端到端增量同步方案
  • 云计算学习100天-第17天
  • Linux学习-(进程间,线程间通信)
  • nuScence数据集
  • 计算机视觉 图像处理 在两张二值图中检测线条交集点的高效方法 适合工程图纸比对、生物神经元网络分析和文档特征提取等场景 ,
  • 20. 云计算-Service MeshServerless
  • 谷粒商城项目-P3简介-分布式基础概念
  • CloudBase AI ToolKit + VSCode Copilot:打造高效智能云端开发新体验
  • 【运维进阶】LNMP + WordPress 自动化部署实验
  • CMakeLists.txt 学习笔记
  • MariaDB/MySQL 客户端工具与服务端配置精要指南
  • C++---有符号和无符号整数的位移操作
  • 云原生俱乐部-mysql知识点归纳(1)
  • 《亚矩阵云手机重构出租接单:KVM 虚拟化与边缘计算驱动的设备替代技术路径》
  • 8.18决策树
  • 性能测试(Jemter)
  • grep命令要点、详解和示例
  • 基于nvm安装管理多个node.js版本切换使用(附上详细安装使用图文教程+nvm命令大全)
  • QT第九讲- 控件委托