SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场cometchat-angular-v5-components

cometchat-angular-v5-components

前端与建站

查看项目

更新于 10-21 20:28

技能介绍

用途

本技能用于在 CometChat Angular UI Kit v5 中挑选组件、覆盖组件局部区域，或判断所需功能是否根本没有对应组件。其事实来源是 angular-v5 目录（references/catalog.md，由已安装的 5.1.0 套件生成）：未列入目录即不可导入。每个组件的精确输入、输出与视图插槽需通过 cometchat-angular-v5-core/references/docs-map.md 从对应组件的 .md 文档中获取，每页开头都有 AI Integration Quick Reference，应先阅读。不得凭记忆或类型声明回答输入或输出。

配套技能

cometchat-angular-v5-core 应优先阅读，涵盖安装、凭据、init→login→render 及黄金路径表面。本技能假定已掌握该内容，不再重复。

命名规则

每个组件有三个不同字符串：CometChatConversationsComponent（导入名）、<cometchat-conversations>（模板名）、"Conversations"（文档标题）。裸名 CometChatConversations 仅内部使用、不可导入，此类名称有 109 个。AI 助手导出是唯一带后缀的例外（CometChatAIAssistantChat）。

输出名称无前缀

Angular 输出为纯名称：itemClick、select、error、closeClick、selectionChange。没有 cc 前缀（那是 React 约定）。绑定 (ccConversationClicked) 会静默不触发。不存在的输出同样静默失败：Angular 将组件上的未知事件视为普通 DOM 监听器，因此 <cometchat-message-header> 上的 (closeClick) 能编译通过但永不触发；closeClick 在 <cometchat-thread-header> 上真实存在，但在 message header 上不存在（已对照编译后的 5.1.0 验证），那里应使用 backClick。

组件输出（部分）

  • <cometchat-conversations>：itemClick、select、error、searchBarClick、contextMenuOpen、contextMenuClose、scrollToTop、scrollToBottom、selectionChange
  • <cometchat-users>：itemClick、select、error、empty、selectionChange
  • <cometchat-groups>：itemClick、select、error、selectionChange
  • <cometchat-group-members>：itemClick、error、empty、selectionChange
  • <cometchat-message-list>：threadRepliesClick、reactionClick、reactionListItemClick、smartReplyClick、conversationStarterClick、messagePrivatelyClick、replyClick、error
  • <cometchat-message-composer>：sendButtonClick、textChange、attachmentAdded、attachmentRemoved、mentionSelected、closePreview、error
  • <cometchat-message-header>：backClick、itemClick、searchClick、voiceCallClick、videoCallClick、conversationSummaryClick、error
  • <cometchat-thread-header>：closeClick、backClick
  • <cometchat-search>：backClick、conversationClick、messageClick、searchError

未列出的输出需查阅对应组件文档页，不得猜测。

组件目录（封闭清单）

  • 列表：<cometchat-conversations>、<cometchat-users>、<cometchat-groups>、<cometchat-group-members>
  • 消息面板：<cometchat-message-header>、<cometchat-message-list>、<cometchat-message-composer>、<cometchat-thread-header>
  • 气泡：text、image、video、audio、file、card、poll、sticker、action、delete、call、collaborative-document、collaborative-whiteboard（均由 message list 渲染）
  • 通话：<cometchat-call-buttons>、<cometchat-incoming-call>、<cometchat-outgoing-call>、<cometchat-ongoing-call>、<cometchat-call-logs>
  • 搜索：<cometchat-search>、<cometchat-search-bar>、<cometchat-search-conversations-list>、<cometchat-search-messages-list>
  • AI：CometChatAIAssistantChat、<cometchat-smart-replies>、<cometchat-conversation-starter>、<cometchat-conversation-summary>
  • 反应：<cometchat-reactions>、<cometchat-reaction-list>、<cometchat-reaction-info>、<cometchat-emoji-keyboard>
  • 支持：<cometchat-error-boundary>、<cometchat-notification-feed>、<cometchat-notification-badge>、<cometchat-change-scope>、<cometchat-flag-message-dialog>、<cometchat-media-recorder>

不要手写列表已渲染的内容

当对应功能开启时，消息气泡、回执、反应选择器、输入指示器、附件预览和上下文菜单均由 <cometchat-message-list> 渲染。手工重建会丢失实时更新和未来修复。若某功能看似损坏，几乎总是缺少 @Input() 或容器未设尺寸，而非缺少组件。<cometchat-conversations> / -users / -groups / -call-logs / -search / -message-list 都依赖内部 height: 100% 直到自身滚动区域，均不自设尺寸。放在 flex 列中若没有 flex: 1; min-height: 0（即 .cc-fill 类），列表不会滚动，而是超出容器并被静默裁剪。

自建界面时套件也导出原子组件

  • CometChatAvatarComponent / <cometchat-avatar>：任意用户/群组头像，[image]、[name]、[loading]
  • CometChatListItemComponent / <cometchat-list-item>：带头像+标题+尾部内容的行
  • CometChatButtonComponent / <cometchat-button>：符合套件样式的操作按钮
  • CometChatDateComponent / <cometchat-date>：套件格式的时间戳
  • CometChatPopoverComponent / <cometchat-popover>：锚定菜单/选择器

手写 <img> 是常见问题：需自造占位图、无图片时不渲染首字母、忽略主题中所有头像令牌。这些是独立组件，每个使用处都要加入消费组件的 imports: []。

自定义组件局部——视图插槽

用绑定到 *View 输入的 <ng-template> 覆盖区域，这是 Angular 的内容投影，替代 React 的 render props。示例代码见原文。触发器必须在同一类中有处理函数，否则模板编译失败（TS2339）。(itemClick) 发出 Conversation，绑定 [user] 或 [group] 前需判别。

各组件可用插槽（已对照套件验证）：

  • conversations / users / groups：headerView、menuView、loadingView、emptyView、errorView、itemView、leadingView、titleView、subtitleView、trailingView（conversations 另有 searchView）
  • message-header：headerView、itemView、leadingView、titleView、subtitleView、trailingView、backButtonView、auxiliaryButtonView
  • message-list：headerView、footerView、emptyView、errorView、loadingView、bubbleFooterView、appendView

只覆盖最小必要插槽；仅想改副标题却替换 itemView 会丢失选择、在线状态和回执。

无套件组件的场景（宿主自建）

  • 创建群组：无组件，需提供 public、private、password-protected 三种类型
  • 封禁成员：无组件；<cometchat-group-members> 覆盖查看/踢出/封禁/范围，但封禁列表来自 SDK
  • 登录/用户选择器：无组件，由应用自行负责

常见陷阱

  • 组件未加入 imports: [] → 静默不渲染
  • 猜测输出名（ccItemClicked）→ 绑定不触发且 Angular 不警告
  • 为外观微调替换 itemView → 丢失内置选择/在线状态/回执
  • 在 header/list/composer 间混用 [user] 和 [group] → 一个会话的 header 配另一个的消息
  • 手写气泡 → 丢失实时更新

验证方法

覆盖区域渲染你的模板 · 组件其余部分不变 · 点击仍触发 · 实时更新仍到达 · 无元素塌缩为零高度。