SuperAPI AI 工具集

cometchat-angular-customization

前端与建站

查看项目

更新于 10-15 20:14

技能介绍

用途:在不修改 CometChat Angular UI Kit v5(@cometchat/chat-uikit-angular@5)本身的情况下定制其行为或外观。采用四级模型(由浅入深):第1级 @Input 插槽视图(ng-template,可解决约95%需求);第2级 RequestBuilder 过滤加载数据;第3级 格式化器、消息操作选项与按类型气泡视图;第4级 事件总线,响应套件活动。始终先尝试第1级,不满足再升级。

主要能力与用法:第1级通过具名插槽视图 @Input 绑定 TemplateRef,如 [itemView]、[emptyView]、[errorView]、[loadingView]、[subtitleView]、[bubbleFooterView] 等,组件各有专属插槽名;隐藏内置功能优先用 [hide*]/[hideOption] 布尔开关。第2级用 [conversationsRequestBuilder]、[usersRequestBuilder]、[groupsRequestBuilder]、[messagesRequestBuilder] 过滤,构建器应建为类属性,避免每次变更检测重新实例化。第3级 a 用 [textFormatters] 传入 CometChatTextFormatter 实例(内置 CometChatMentionsFormatter、CometChatUrlFormatter、CometChatEmojiFormatter、CometChatMarkdownFormatter),自定义需继承并实现 id、getRegex()、format(text),可选 shouldFormat 与 priority,且 list 与 composer 须传同一数组;b 用 [additionalOptions] 传 CometChatActionsIcon[] 或 [optionsOverride] 回调增删改消息操作菜单;c 用 MessageBubbleConfigService.setBubbleView 或 [bubbleFooterView]/[appendView] 渲染自定义气泡。第4级订阅 CometChatEvents 响应事件。

注意:v5 是相对 v4 的彻底重构,CometChatMessageTemplate、DataSource/DataSourceDecorator、ChatConfigurator、templates @Input 等 v4 符号已不存在,不应引用;所有导入来自 @cometchat/chat-uikit-angular 或 @cometchat/chat-sdk-javascript,v5 无 uikit-shared。不得臆造绑定,须对照组件目录与安装的 .d.ts 核实。建议先读 cometchat-angular-core 与 cometchat-angular-components。官方文档:https://www.cometchat.com/docs/ui-kit/angular/overview;Docs MCP:claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp。资料未提供收费、价格与平台支持细节。