UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文聚焦 ng-zorro-antd 的 Resizable调整尺寸组件中最具实用价值的特性——预览模式nzPreview。当用户拖拽调整手柄时组件不会让目标元素每帧跟随鼠标重排而是先渲染一个幽灵元素ghost element实时展示目标尺寸待鼠标释放后才真正应用尺寸。本文从官方 Demo 入手结合NzResizableDirective的源码实现与单元测试讲解预览模式的原理、完整可运行示例、API 参数、样式定制与性能收益让你能直接在生产项目中使用这一模式。预览模式是什么ng-zorro-antd 的 Resizable 组件声明在需要调整尺寸的元素上通过[nz-resizable]指令开启详见 组件 API 文档。组件支持三类增强能力支持释放前预览提高性能即本文主题nzPreview支持栅格系统nzGridColumnCount等支持自定义调整手柄和预览样式。其中预览模式解决的核心问题是调整尺寸过程中元素尺寸每帧变化会触发目标元素及其子内容的频繁布局与重绘。若目标元素包含复杂内容表格、图表、编辑器等这种高频 DOM 变更会带来明显卡顿。开启预览后拖拽过程中只有轻量的幽灵元素在变化真正的目标元素只在nzResizeEnd时更新一次从而显著减少布局抖动、提升拖拽流畅度。官方文档对该功能的描述极其简洁——在应用尺寸前预览Preview before apply size完整的用法与原理需要结合 预览 Demo 与 指令源码 来理解。完整可运行的预览 Demo官方仓库在 preview.ts 中提供了预览模式的完整示例核心代码如下import { Component, signal } from angular/core; import { NzResizableModule, NzResizeEvent } from ng-zorro-antd/resizable; Component({ selector: nz-demo-resizable-preview, imports: [NzResizableModule], template: div classbox nz-resizable nzPreview (nzResizeEnd)onResize($event) [style.height.px]height() [style.width.px]width() nz-resize-handles / content /div , styles: :host { display: block; height: 200px; } .box { display: flex; align-items: center; justify-content: center; background: #eee; border: 1px solid #ddd; } }) export class NzDemoResizablePreviewComponent { readonly width signal(400); readonly height signal(200); onResize({ width, height }: NzResizeEvent): void { this.width.set(width!); this.height.set(height!); } }关键点拆解开启预览在带nz-resizable的元素上追加布尔属性nzPreview等价于[nzPreview]true源码中由booleanAttribute转换见 resizable.directive.ts。只监听nzResizeEnd预览模式下尺寸在释放时才真正生效因此这里只在(nzResizeEnd)中回写width()/height()信号把信号值通过[style.width.px]、[style.height.px]绑定到元素样式上。这与 基础示例 basic.ts 中在(nzResize)里用requestAnimationFrame实时回写的做法形成对比前者预览 释放应用后者逐帧实时应用。快捷手柄组件nz-resize-handles /一次性渲染八个方向bottomRight、topRight、bottomLeft、topLeft、bottom、right、top、left的调整手柄默认值定义在 resize-handles.component.ts。也可用单个nz-resize-handle nzDirectionbottomRight /只放一个手柄。配合信号SignalDemo 使用 Angular 的signal管理宽高状态与NzResizableModule导出NzResizableDirective、NzResizeHandleComponent、NzResizeHandlesComponent组合使用按需在组件imports中引入模块即可。预览模式的底层实现原理预览模式的实现集中在 resizable.directive.ts 中由三个环节组成1. 拖拽期间创建幽灵元素当用户按下手柄并移动时resize()方法先通过calcSize()计算受边界nzBounds、最大/最小宽高nzMaxWidth等、栅格nzGridColumnCount与锁定宽高比nzLockAspectRatio约束后的目标尺寸然后若存在nzResize监听器才回到 Angular Zone 派发nzResize事件避免无监听时无谓的变更检测开销若nzPreview为真则调用previewResize(size)创建/更新幽灵元素见 resizable.directive.ts。previewResize()通过createGhostElement()用Renderer2创建一个div并设置classnz-resizable-preview随后把计算出的宽高以 px 为单位直接写入其 style见 resizable.directive.ts。也就是说拖拽全程只操作这一个轻量幽灵 div 的样式目标元素本身不被触碰。2. 幽灵元素的定位与外观幽灵元素由 index.less 定义.nz-resizable-preview { position: absolute; top: 0; left: 0; z-index: 8; border: 1px dashed #d1d1d1; }它绝对定位于目标元素左上角因此目标元素需处于非static定位指令默认将其设为relativez-index 为 8低于手柄的 9并以1px 虚线边框呈现直观表达这是将要应用的新尺寸。视觉上用户看到的是目标区域外轮廓跟着鼠标伸缩而真实内容纹丝不动。3. 释放时应用真实尺寸当鼠标/触摸释放时endResize()先removeGhostElement()移除幽灵元素再从sizeCache取出拖拽期间最后一次计算并缓存的结果或回退到初始getBoundingClientRect()尺寸仅当存在nzResizeEnd监听器时派发nzResizeEnd事件见 resizable.directive.ts。Demo 正是在这个回调中把最终宽高写回width()/height()信号从而让目标元素一次性完成尺寸更新。事件流与性能设计整个拖拽流程的事件走的是Angular Zone 外 Subject 桥接的路径手柄组件通过fromEventOutsideAngular在 Zone 外监听mousedown/touchstart见 resize-handle.component.tsNzResizableService在 Zone 外注册document级的mousemove/mouseup触摸屏对应touchmove/touchend监听再经各OutsideAngular$Subject 派发见 resizable.service.ts。指令收到移动事件后仅在存在监听器或开启预览时才回到 Zone 工作。这套机制让拖拽高频回调尽可能少地触发变更检测与预览幽灵元素配合把调整尺寸过程中的主线程开销压到最低。预览模式的测试验证仓库单元测试 resizable.spec.ts 直接使用预览 Demo 组件验证该行为describe(preview, () { it(should preview work, () { const rect resizableEle.getBoundingClientRect(); const handle resizableEle.querySelector(.nz-resizable-handle-bottomRight) as HTMLElement; dispatchMouseEvent(handle, mousedown, rect.right, rect.bottom); dispatchMouseEvent(window.document, mousemove, rect.right 20, rect.bottom 20); fixture.detectChanges(); const preview resizableEle.querySelector(.nz-resizable-preview) as HTMLElement; expect(preview).toBeTruthy(); }); });测试流程印证了实现细节在bottomRight手柄上触发mousedown向document派发mousemove模拟拖拽 20px随后即可在 DOM 中查询到.nz-resizable-preview幽灵元素。这从测试层面确认了拖拽中渲染幽灵元素的行为也为我们自行验证预览模式提供了可复现的路径。预览模式相关的完整 API要灵活运用预览模式需要掌握其所属指令与手柄组件的全部参数详见 组件 API 文档。[nz-resizable] 指令参数nz-resizable声明在需要调整尺寸的元素上元素position必须为relative | absolute | fixed | sticky之一默认会自动设置为relative。事件负载类型定义如下interface NzResizeEvent { width?: number; height?: number; col?: number; direction?: NzResizeDirection; mouseEvent?: MouseEvent; }参数说明类型默认值[nzBounds]调整尺寸的边界window \| parent \| ElementRefHTMLElementparent[nzMaxHeight]最大高度超过边界部分忽略number-[nzMaxWidth]最大宽度超过边界部分忽略number-[nzMinHeight]最小高度number40[nzMinWidth]最小宽度number40[nzGridColumnCount]栅格列数-1 为不栅格number-1[nzMaxColumn]栅格最大列数number-[nzMinColumn]栅格最小列数number-[nzLockAspectRatio]锁定宽高比booleanfalse[nzPreview]开启预览booleanfalse[nzDisabled]禁用booleanfalse(nzResize)调整尺寸时的事件EventEmitterNzResizeEvent-(nzResizeStart)开始调整尺寸时的事件EventEmitterNzResizeEvent-(nzResizeEnd)结束调整尺寸时的事件EventEmitterNzResizeEvent-源码层面的默认值与转换细节可在 resizable.directive.ts 确认数值类输入通过numberAttribute转换如nzMinWidth: number 40、nzGridColumnCount: number -1布尔类输入通过booleanAttribute转换。约束计算逻辑集中在calcSize()见 resizable.directive.ts当nzBounds为parent/window/指定元素时分别取父元素、窗口或指定元素的宽高作为边界栅格模式下用spanWidth maxWidth / nzGridColumnCount计算列宽并按nzMinColumn/nzMaxColumn约束列数最终col Math.round(newWidth / spanWidth)吸附到整列锁定宽高比时则按手柄方向在宽高之间互推换算。nz-resize-handle 手柄组件type NzResizeDirection top | right | bottom | left | topRight | bottomRight | bottomLeft | topLeft; type NzCursorType window | grid;参数说明类型默认值[nzDirection]调整方向NzResizeDirectionbottomRight[nzCursorType]手柄的光标类型NzCursorTypewindownz-resize-handles 快捷手柄组件interface NzResizeHandleOption { direction: NzResizeDirection; cursorType: NzCursorType; }参数说明类型默认值[nzDirections]需要的手柄方向或手柄选项NzResizeDirection \| NzResizeHandleOption[]所有方向例如只想暴露右下角手柄且使用栅格光标可写nz-resize-handles [nzDirections][bottomRight] /或传入{ direction: bottomRight, cursorType: grid }形式的选项对象字符串形式会被归一化为cursorType: window见 resize-handles.component.ts。引入样式与自定义预览外观使用前需引入组件样式见 组件 API 文档import node_modules/ng-zorro-antd/resizable/style/entry.less;组件样式只包含必要的位置属性和简单样式可通过覆写类名自定义。与预览模式直接相关的类名如下.nz-resizablenz-resizable组件命名空间.nz-resizable-resizing正在调整尺寸时被添加到nz-resizable上由指令host绑定见 resizable.directive.ts.nz-resizable-preview开启预览时幽灵元素的类名默认样式见 index.less.nz-resizable-handle-box-hover当鼠标悬停在nz-resizable上时被添加到nz-resize-handle上.nz-resizable-handle调整手柄命名空间及各方向类名包含.nz-resizable-handle-top、.nz-resizable-handle-left、.nz-resizable-handle-bottom、.nz-resizable-handle-right、.nz-resizable-handle-topRight、.nz-resizable-handle-topLeft、.nz-resizable-handle-bottomRight、.nz-resizable-handle-bottomLeft.nz-resizable-handle-cursor-type手柄的光标类型命名空间包含.nz-resizable-handle-cursor-type-window与.nz-resizable-handle-cursor-type-grid。例如要让幽灵元素更醒目可覆写.nz-resizable-preview { border: 2px dashed #1677ff; /* 主题色虚线 */ background: rgba(22, 119, 255, 0.08); /* 半透明底色 */ }需要注意的是指令宿主同时绑定了.nz-resizable-resizing与.nz-resizable-disabled类见 resizable.directive.ts禁用状态下手柄会获得pointer-events: none见 index.less因此nzPreview与nzDisabled不应同时期望生效。实战建议与适用场景优先给重内容元素开预览表格、长列表、图表、代码编辑器等元素在拖拽中逐帧重排代价高nzPreview是最直接的优化手段轻量卡片类元素可直接用nzResize实时回写无需预览。配合nzResizeEnd落库预览模式下最终尺寸以nzResizeEnd为准务必在该回调中持久化宽高如写入signal再绑定[style.width.px]/[style.height.px]与 preview.ts 一致。与栅格系统组合nzGridColumnCount开启后拖拽会按列吸附预览幽灵元素同样按列宽显示可让对齐栅格的交互获得一致的视觉反馈可参考 grid 示例。与锁定宽高比组合nzLockAspectRatio开启后幽灵元素按锁定比例伸缩避免释放后尺寸跳变。注意定位前提nz-resizable目标元素必须处于非static定位指令自动设为relative幽灵元素的position: absolute依赖这一点。小结预览模式是 ng-zorro-antd Resizable 组件为高性能拖拽调尺寸给出的开箱方案拖拽中仅渲染一个轻量幽灵元素释放时才把尺寸应用到真实元素并以Zone 外监听 按需派发事件的机制将变更检测开销降至最低。通过官方 preview Demo 的完整示例、指令源码 的实现细节以及 单元测试 的验证路径你可以快速在自己的 Angular 项目中落地这一模式并为幽灵元素与手柄定制符合设计规范的视觉样式。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐使用 NzImageService 以服务方式创建图片预览层ng-zorro-antd 命令式预览 API 完整指南使用 NzImageService 以服务方式创建图片预览层ng zorro antd 命令式预览 API 完整指南 本文聚焦 ng zorro antd IUI组件前端ng-zorro-antd Image 组件完全指南可预览图片的显示、容错与指令式预览ng zorro antd Image 组件完全指南可预览图片的显示、容错与指令式预览 ng zorro antd 是 Angular 生态中最流行的 AntUI组件前端RISC-V指令集完全指南从零开始理解开源处理器架构RISC V指令集完全指南从零开始理解开源处理器架构 RISC V指令集架构ISA是当今最受关注的开源处理器架构为计算机架构研究和工业实现提供了全新的可文档指令集上一篇Pixelle-Video3分钟掌握AI全自动短视频生成零门槛创作爆款内容下一篇Hugo URL 管理完全指南slug、url、permalinks 与 aliases 的实战配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考