UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读自动分词Automatic tokenization是 ng-zorro-antd 的nz-select组件在tags标签与multiple多选模式下提供的输入增强能力用户一次性粘贴或输入以指定分隔符如英文逗号,分隔的多个词条如露西,杰克组件会自动把它们拆分为多个独立的选中项。本指南基于本仓库 components/select/demo/automatic-tokenization.md 演示展开结合 select.component.ts 与 select-top-control.component.ts 的源码实现讲清nzTokenSeparators的配置方式、触发时机、底层分词算法、与nzMode、nzMaxMultipleCount的协作规则以及与之配套的测试用例让读者能够直接照搬配置并在真实业务中灵活扩展。一、从一个 Demo 说起自动分词长什么样官方演示的完整思路如下向输入框粘贴或输入露西,杰克英文环境下为Lucy,Jack组件会把这段文本按分隔符拆成两个词条并自动生成为已选标签。对应示例组件源码见 components/select/demo/automatic-tokenization.tsimport { Component } from angular/core; import { NzSelectModule } from ng-zorro-antd/select; function alphabet(): string[] { const children: string[] []; for (let i 10; i 36; i) { children.push(i.toString(36) i); } return children; } Component({ selector: nz-demo-select-automatic-tokenization, imports: [NzSelectModule], template: nz-select nzModetags nzPlaceHolderautomatic tokenization [nzOptions]options [nzTokenSeparators][,] / , styles: nz-select { width: 100%; } }) export class NzDemoSelectAutomaticTokenizationComponent { readonly options alphabet().map(item ({ label: item, value: item })); }要点拆解nzModetags开启标签模式这是自动分词生效的前提之一[nzTokenSeparators][,]声明分词分隔符为英文逗号[nzOptions]options提供候选数据源选项由alphabet()生成aa、bb…zz即 10 进制下标 10~35 转 36 进制并重复两次形成i.toString(36) i共 26 个nzPlaceHolderautomatic tokenization占位提示文本。注意一个细节当粘贴的文本恰好命中候选选项如粘贴aa,bb组件会优先匹配既有选项而不是无条件新建只有未命中的词条才会在tags模式下被创建为新的标签。这一行为在后面的源码解析中会详细展开。适用前提只在 tags 和 multiple 模式下可用这是官方文档明确标注的限制在默认的 single单选模式下设置nzTokenSeparators不会触发分词。二、核心 APInzTokenSeparators 的官方定义在组件文档 components/select/doc/index.zh-CN.md 中nzTokenSeparators被定义为属性说明类型默认值[nzTokenSeparators]在 tags 和 multiple 模式下自动分词的分隔符string[][]对应的组件输入声明位于 select.component.tsInput() nzTokenSeparators: string[] [];也就是说类型是字符串数组可以同时声明多个分隔符例如[ , ,]空格与逗号会同时支持两种拆分默认值为空数组[]此时自动分词功能不生效该属性只影响tags/multiple模式下的输入处理不参与选项过滤等其他逻辑。三、触发链路与分词算法的源码级解析3.1 数据流总览自动分词从“用户输入变化”到“选中值更新”经历了两个组件的协作nz-select (select.component.ts) └─ 模板中绑定 [tokenSeparators]nzTokenSeparators └─ 模板中绑定 (tokenize)onTokenSeparate($event) nz-select-top-control (select-top-control.component.ts) ├─ onInputValueChange() 监听输入值变化 │ └─ tokenSeparate(inputValue, tokenSeparators) → 触发分词 │ └─ 命中分隔符 → tokenize 事件携带 string[] 向上抛出 └─ nz-select 的 onTokenSeparate(listOfLabel) 接收并更新选中值模板绑定关系见 select.component.ts输入转发与事件监听分别把nzTokenSeparators传给内层组件并把分词结果接回外层处理。3.2 输入变化即触发分词的第一步发生在内层顶部控制组件 select-top-control.component.ts 的onInputValueChange中onInputValueChange(value: string): void { if (value ! this.inputValue) { this.inputValue value; this.updateTemplateVariable(); this.inputValueChange.emit(value); this.tokenSeparate(value, this.tokenSeparators); } }只要用户输入的内容发生变化就会同步调用tokenSeparate(value, this.tokenSeparators)尝试分词因此“粘贴一整段含分隔符的文本”同样能被捕获。3.3 分词判定与拆分算法核心实现tokenSeparate位于 select-top-control.component.tstokenSeparate(inputValue: string, tokenSeparators: string[]): void { const includesSeparators (str: string, separators: string[]): boolean { // eslint-disable-next-line typescript-eslint/prefer-for-of for (let i 0; i separators.length; i) { if (str.lastIndexOf(separators[i]) 0) { return true; } } return false; }; const splitBySeparators (str: string, separators: string[]): string[] { const reg new RegExp([${separators.join()}]); const array str.split(reg).filter(token token); return [...new Set(array)]; }; if ( inputValue inputValue.length tokenSeparators.length this.mode ! default includesSeparators(inputValue, tokenSeparators) ) { const listOfLabel splitBySeparators(inputValue, tokenSeparators); this.tokenize.next(listOfLabel); } }实现要点触发条件五重门槛输入非空、分隔符数组非空、当前模式不是default、输入内容中确实出现某个分隔符lastIndexOf判定且要求分隔符不在字符串首位即 0。任一条件不满足则不触发分词。分隔符匹配includesSeparators遍历分隔符数组只要有一个分隔符出现在输入串中即可。拆分算法splitBySeparators将分隔符数组 join 后构造成字符类正则/[ ,]/再调用String.prototype.split拆分随后filter(token token)过滤空串最后通过new Set去重——这意味着同一段输入中重复的词条只会生成一次。结果上抛拆分后的词条数组通过tokenize事件EventEmitterstring[]见 select-top-control.component.ts抛给外层nz-select。从源码结构看分词算法是纯字符串处理不依赖候选列表因此即便输入内容完全不在nzOptions中也能完成拆分——是否“入选项”由外层组件在下一步决定。四、外层接收分词结果如何变成选中项nz-select通过onTokenSeparate(listOfLabel: string[])接收分词结果并写入选中值实现在 select.component.tsonTokenSeparate(listOfLabel: string[]): void { const listOfMatchedValue this.listOfTagAndTemplateItem .filter(item listOfLabel.findIndex(label label item.nzLabel) ! -1) .map(item item.nzValue) .filter(item this.listOfValue.findIndex(v this.compareWith(v, item)) -1); /** * Limit the number of selected items to nzMaxMultipleCount */ const limitWithinMaxCount T(value: T[]): T[] this.isMaxMultipleCountSet ? value.slice(0, this.nzMaxMultipleCount) : value; if (this.nzMode multiple) { const updateValue limitWithinMaxCount([...this.listOfValue, ...listOfMatchedValue]); this.updateListOfValue(updateValue); } else if (this.nzMode tags) { const listOfUnMatchedLabel listOfLabel.filter( label this.listOfTagAndTemplateItem.findIndex(item item.nzLabel label) -1 ); const updateValue limitWithinMaxCount([...this.listOfValue, ...listOfMatchedValue, ...listOfUnMatchedLabel]); this.updateListOfValue(updateValue); } this.clearInput(); }4.1 multiple 模式只匹配不新建multiple模式下分词得到的每个词条会先在listOfTagAndTemplateItem候选选项集合中按nzLabel精确匹配命中的选项取其nzValue加入选中值已存在于当前选中值中的选项会被过滤compareWith默认o1 o2见 select.component.ts可通过自定义比较函数改变去重逻辑未命中任何选项的词条会被丢弃——这正是 multiple 与 tags 的关键差异。4.2 tags 模式匹配 自动新建标签tags模式在 multiple 的匹配逻辑之上追加了一步把所有在候选项中找不到的词条listOfUnMatchedLabel也直接作为新值写入选中值从而完成“自动创建标签”。4.3 数量上限协作nzMaxMultipleCount两种模式下最终选中值都会经过limitWithinMaxCount处理当设置了nzMaxMultipleCount默认Infinity见 select.component.ts时slice(0, nzMaxMultipleCount)会把结果裁剪到上限以内避免一次粘贴大量词条突破最大选择数限制。分词完成后调用clearInput()清空输入框。五、可复用的实战配置模板5.1 多选模式粘贴即批量勾选适合“从 Excel 粘贴一批客户名”等场景粘贴的词条只在已有选项中生效nz-select nzModemultiple nzPlaceHolder粘贴多个选项例如 aa,bb,cc [nzOptions]options [nzTokenSeparators][,] /nz-select5.2 标签模式自由创建标签适合“关键字标签录入”未命中的词条会自动变成新标签nz-select nzModetags nzPlaceHolder输入或粘贴标签例如 前端,Angular [nzTokenSeparators][,, ] /nz-select这里同时声明了逗号和空格两个分隔符[ , ,]亦可注意正则字符类/[ ,]/会逐字符匹配因此多字符分隔符如, 逗号加空格会被视为两个单字符分隔符处理。5.3 组合上限分词 nzMaxMultipleCount防止一次粘贴过多词条把选择列表撑爆nz-select nzModetags nzPlaceHolder最多 3 个标签 [nzTokenSeparators][,] nzMaxMultipleCount3 /nz-select配合 select.spec.ts 中 “should nzTokenSeparators nzMaxMultipleCount work” 的测试用例见第 1280 行、第 1460 行附近可以确认两条规则会叠加生效先分词、再按上限截断。六、测试用例行为被固化的证据仓库单元测试 components/select/select.spec.ts 对自动分词做了多组覆盖例如第 753、857、1264、1443 行附近的should nzTokenSeparators work(s)验证component.nzTokenSeparators.set([,])后粘贴含逗号的文本能正确拆分并生成选中项第 1280、1460 行附近的should nzTokenSeparators nzMaxMultipleCount work验证分词结果受nzMaxMultipleCount约束第 1982、2021、2123、2161 行附近在基于 signal 的测试宿主模板中直接以[nzTokenSeparators]nzTokenSeparators()形式绑定输入覆盖响应式写法下的分词行为。这些用例从行为层面固化了“仅 tags/multiple 生效”“按分隔符拆分”“匹配既有选项”“tags 模式自动新建”“受最大数量限制”等全部语义是本文各结论的测试级证据。七、常见问题与注意事项单选模式不生效nzModedefault时tokenSeparate内部直接短路this.mode ! default不成立即使配置了nzTokenSeparators也不会分词。分隔符出现在词首时不触发includesSeparators使用str.lastIndexOf(separators[i]) 0判断分隔符若位于输入串首位index 为 0不会触发分词。多分隔符是“字符级”拆分多个分隔符会拼进同一个字符类正则逐个字符匹配无法把多字符字符串当作整体分隔符。重复词条自动去重拆分结果经new Set去重同一输入中重复内容只生成一次选中项。与既有选中值的关系已选中的值不会因重复粘贴而重复添加按compareWith判断默认严格相等。中文场景同样适用官方示例即为露西,杰克分词只依赖分隔符字符与输入语言无关。结语自动分词是 ng-zorro-antdnz-select在批量录入场景下的一项高频实用能力。通过本文可以掌握使用[nzTokenSeparators][,]一行配置即可开启其底层由 select-top-control.component.ts 的字符串拆分算法与 select.component.ts 的选中值合并逻辑两级协作完成multiple 模式只匹配既有选项、tags 模式还会自动新建标签并统一受nzMaxMultipleCount上限约束。这些行为均有 select.spec.ts 测试用例背书可以放心在真实项目中直接落地。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Pagination 分页组件完整指南从基础用法到源码级原理解析ng zorro antd Pagination 分页组件完整指南从基础用法到源码级原理解析 分页器Pagination是 ng zorro antd 中UI组件前端塞尔达传说存档管理器如何实现WiiU与Switch存档的无缝互转塞尔达传说存档管理器如何实现WiiU与Switch存档的无缝互转 BotW Save Manager是一个专门为《塞尔达传说旷野之息》玩家设计的跨平台存档转UI组件前端ng-zorro-antd Input 自定义校验状态nzStatus完全指南error / warning 的用法与源码原理ng zorro antd Input 自定义校验状态nzStatus完全指南error / warning 的用法与源码原理 nzStatus 是 ngUI组件前端上一篇黑苹果硬件兼容性怎么查OpCore-Simplify 5分钟帮你避坑下一篇awesome-codex-skills 实战基于 Rube MCP 与 Composio 自动化 Synthflow AI 语音工作流创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考