UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读在聊天、评论、发布等场景中Mention提及组件常与 前缀配合使用但当输入内容较多时用户需要一个一键清空的入口。本篇文章围绕 ng-zorro-antd 中 Mention 组件带移除图标With clear icon这一能力展开先带你读懂官方 demo 的完整写法再逐项拆解nzAllowClear、nzClearIcon、nzOnClear三个 API 的参数语义最后深入组件源码与单元测试理清清除按钮的渲染条件、点击后的清理链路及其与表单双向绑定的关系。读完你可以在自己的 Angular 项目中快速复刻并定制 Mention 的清除交互。一、官方 Demo带移除图标的两种形态1.1 文档与代码位置该功能对应的官方演示文档为 components/mention/demo/clear.md其中文描述仅有一句话自定义清除按钮Customize clear button而完整的可运行示例位于配套的 components/mention/demo/clear.ts。该能力自20.3.0版本起提供文档 frontmatter 中的version: 20.3.0即是对应标记见 components/mention/demo/clear.md 第 3 行。1.2 Demo 源码逐行解读components/mention/demo/clear.ts 的核心代码如下import { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzInputModule } from ng-zorro-antd/input; import { NzMentionModule } from ng-zorro-antd/mention; Component({ selector: nz-demo-mention-clear, imports: [FormsModule, NzInputModule, NzMentionModule], template: nz-mention [nzSuggestions]suggestions (nzOnSelect)onSelect($event) nzAllowClear (nzOnClear)onClear() textarea rows1 placeholderinput here nzMentionTrigger nz-input [(ngModel)]inputValue/textarea /nz-mention br / br / nz-mention [nzSuggestions]suggestions (nzOnSelect)onSelect($event) nzAllowClear (nzOnClear)onClear() textarea rows3 placeholderinput here nzMentionTrigger nz-input [(ngModel)]inputValue/textarea /nz-mention }) export class NzDemoMentionClearComponent { readonly inputValue signal(afc163); readonly suggestions [afc163, benjycui, yiminghe, RaoHai, 中文, にほんご]; ... }要点拆解nzAllowClear布尔属性不加赋值地写在模板上即为true用于开启清除按钮Demo 同时展示了rows1单行和rows3多行两种 textarea 形态说明清除按钮对两种输入形态均生效。nzMentionTrigger指令标记input/textarea为提及触发元素必需配合nz-input获得输入框样式配合[(ngModel)]完成表单双向绑定。(nzOnSelect)选择某个建议项时回调Demo 中仅console.log(e)。(nzOnClear)点击清除按钮时回调Demo 中输出console.log(onClear)。初始值inputValue signal(afc163)让输入框初始就带有一个已提及内容从而在页面加载后即可直观看到清除按钮出现的效果——这也印证了清除按钮只在有内容时显示的渲染规则详见第三节源码分析。二、清除相关的三个 API 详解在 components/mention/doc/index.zh-CN.md 的 API 表格中清除能力由三个参数共同构成参数说明类型默认值版本[nzAllowClear]支持清除booleanfalse20.3.0[nzClearIcon]自定义的清空图标TemplateRefvoid-20.3.0(nzOnClear)清空已选项时触发的回调函数EventEmittervoid--结合源码逐一说明nzAllowClearboolean类型默认false。开启后当输入框存在非空内容时在组件右侧后缀区域渲染一个清除图标按钮。源码声明见 components/mention/mention.component.ts 第 170 行Input({ transform: booleanAttribute }) nzAllowClear false;它使用了 Angular 的booleanAttribute转换因此模板中可直接写作nzAllowClear而不必写成[nzAllowClear]true。nzClearIconTemplateRefvoid类型用于替换默认的清除图标。默认图标为close-circle填充主题传入自定义模板后通过nzStringTemplateOutlet渲染源码见下节。nzOnClearEventEmittervoid类型输出事件点击清除按钮清空内容后触发便于在业务侧执行清空后重置列表/统计等联动逻辑。三、源码级剖析清除按钮是如何工作的3.1 渲染条件有值才显示清除按钮的渲染逻辑位于 components/mention/mention.component.ts 的组件模板中第 123–131 行if (nzAllowClear hasValue()) { span classant-mentions-suffix button typebutton tabindex-1 classant-mentions-clear-icon (click)clear() ng-template [nzStringTemplateOutlet]nzClearIcon nz-icon nzTypeclose-circle nzThemefill / /ng-template /button /span }两个关键判断nzAllowClear为真hasValue()为真——hasValue是一个computed信号其定义为!!this.trigger()?.value().trim()第 203–205 行即触发元素nzMentionTrigger当前值去掉首尾空白后非空。这意味着输入框内容为空时即使开启了nzAllowClear也不会显示清除按钮。默认图标是nz-icon nzTypeclose-circle nzThemefill关闭圆形实心图标若提供了nzClearIcon模板则通过[nzStringTemplateOutlet]指令替换默认图标。该模板插槽与NzIconModule、NzEmptyModule等一并被组件模板引用见第 143–149 行的imports声明。3.2 点击清除完整的清理链路点击清除按钮会调用组件的clear()方法components/mention/mention.component.ts 第 323–327 行clear(): void { this.closeDropdown(); this.trigger().clear(); this.nzOnClear.emit(); }链路分解closeDropdown()若建议浮层overlay处于打开状态则立即关闭并退订外部点击监听第 292–299 行。this.trigger().clear()调用触发指令NzMentionTriggerDirective的clear()见 components/mention/mention-trigger.ts 第 107–111 行clear(): void { this.value.set(); this.elementRef.nativeElement.value ; this.onChange(); }该方法做了三件事把指令内部的value信号置空、把原生 DOM 元素的value置空、调用onChange()通知ControlValueAccessor——这正是[(ngModel)]双向绑定能够同步清空的关键所在。NzMentionTriggerDirective实现了ControlValueAccessor并在NG_VALUE_ACCESSOR中注册见 components/mention/mention-trigger.ts 第 31–37 行因此通过nzMentionTrigger标记的输入框与 Angular 表单体系天然互通。 3.nzOnClear.emit()向外发出nzOnClear事件供业务层监听。3.3 与选择、输入流程的配合清除行为与组件的其他能力是同一套状态体系输入时handleInput会把新值写入trigger().value第 329–334 行因此hasValue()能实时反映输入内容选择建议时selectSuggestion通过insertMention在光标位置插入mention 空格分割符split: 定义在 components/mention/config.ts并同样触发onChange同步表单值清除时清空的是整个输入框内容而非仅移除某个提及片段属于一键清空式交互。从代码结构看nzOnClear事件在设计上用于清空后的业务联动例如清空搜索关键词、重置远端建议数据、收起浮层后的统计刷新等。四、单元测试如何验证清除行为清除功能的测试用例集中在 components/mention/mention.spec.ts 第 681–734 行附近覆盖了四条关键行为契约nzAllowClear为 false 时不显示清除按钮第 681–688 行即使输入了内容也断言By.css(.ant-mentions-clear-icon)查询结果为nullnzAllowClear为 true 且有值时显示清除按钮第 690–697 行输入 test value 后断言清除图标元素存在nzAllowClear为 true 但无值时仍不显示第 699–706 行输入空串后断言元素为null与hasValue()的渲染条件一致点击清除后清空输入并触发nzOnClear第 708–734 行点击.ant-mentions-clear-icon后断言原生textarea.value 、绑定的inputValue 并通过vi.spyOn断言onClear回调被调用。这些测试用例既是行为契约也可以作为你接入nzAllowClear后自查的参照核心关注点始终是显示条件有值与清空同步表单值归零。五、实战扩展自定义清除图标与表单联动5.1 用nzClearIcon替换默认图标nzClearIcon接收TemplateRefvoid可在组件内定义模板后传入ng-template #clearIcon span stylecolor: #ff4d4f✕ 清空/span /ng-template nz-mention [nzSuggestions]suggestions [nzClearIcon]clearIcon nzAllowClear (nzOnClear)onClear() textarea nz-input nzMentionTrigger [(ngModel)]inputValue rows2/textarea /nz-mention组件源码中模板是通过[nzStringTemplateOutlet]将nzClearIcon渲染到清除按钮内部的components/mention/mention.component.ts 第 126 行因此模板内可以是任意自定义内容而不仅仅是图标本身。5.2 与响应式表单结合由于nzMentionTrigger实现了ControlValueAccessor清除按钮点击后调用onChange()会同步写入ngModel/FormControl的值。若使用响应式表单可在nzOnClear中只处理业务副作用值本身已被清空nz-mention [nzSuggestions]suggestions nzAllowClear (nzOnClear)onMentionCleared() input nz-input nzMentionTrigger formControlNamecontent / /nz-mentiononMentionCleared(): void { // 此时表单值已被组件置空这里只需做联动例如重置计数或请求列表 this.hitCount.set(0); }5.3 使用注意事项显示条件清除按钮仅在开启nzAllowClear且输入值非空时渲染空输入状态下不会出现因此无需额外判断即可安全展示浮层联动点击清除时会先closeDropdown()再清空内容避免清空后残留的浮层定位错乱版本前提nzAllowClear、nzClearIcon为 20.3.0 新增能力使用时请确认项目依赖的 ng-zorro-antd 版本不低于 20.3.0键盘可达性清除按钮本身是button typebutton tabindex-1不会干扰输入框的 Tab 焦点顺序避免点击时意外触发表单提交。总结Mention 的带移除图标能力虽小却是完整表单交互的重要一环。通过本篇文章可以看到官方 democomponents/mention/demo/clear.ts提供了单行/多行两种开箱即用的写法nzAllowClear、nzClearIcon、nzOnClear三个 API 分别负责开关、定制与回调组件源码components/mention/mention.component.ts、components/mention/mention-trigger.ts保证了有值才显示、点击即清空、表单同步归零的完整闭环而单元测试components/mention/mention.spec.ts则为这些行为契约提供了可追溯的验证依据。掌握这套机制后你便可以在业务中灵活定制 Mention 的清空交互。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd ColorPicker 清除颜色功能实战nzAllowClear 与 nzOnClear 的源码级解析ng zorro antd ColorPicker 清除颜色功能实战nzAllowClear 与 nzOnClear 的源码级解析 导读 nz color pUI组件前端ng-zorro-antd Radio 按钮样式实战指南nz-radio-button 从入门到源码剖析ng zorro antd Radio 按钮样式实战指南 nz radio button 从入门到源码剖析 本篇指南聚焦 ng zorro antdAnguUI组件前端ng-zorro-antd 浮动按钮组弹出方向nzPlacement完整指南从 Demo 到源码实现ng zorro antd 浮动按钮组弹出方向nzPlacement完整指南从 Demo 到源码实现 导读 本篇指南聚焦 ng zorro antd 中UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考