# @desource/context7-widget-angular 中文文档
规范地址：https://npmcn.com/package/%40desource/context7-widget-angular/
版本：0\.2\.3
npm 元数据更新时间：2026-10-31T16:13:05.805Z
中文译文更新时间：2026-11-12T01:38:53.097Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40desource/context7-widget-angular
原文对照：https://npmcn.com/package/%40desource/context7-widget-angular/?lang=original
项目主页：https://github.com/DeSource-Labs/context7-widget/tree/main/packages/angular#readme
源码仓库：https://github.com/DeSource-Labs/context7-widget
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：143 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@angular/core ^22\.0\.0，@angular/common ^22\.0\.0，@angular/platform-browser ^22\.0\.0
- 首次发布：2026-09-09T22:04:36.544Z
- 最新版本发布：2026-10-31T16:13:05.406Z
- 近 30 天下载量：16887（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）
## 中文简介
本地 Angular 组件和可自定义上下文7 文档聊天部件的可插入控制 .
## 安装
```sh
npm install @desource/context7-widget-angular
```
也可以使用：`pnpm add @desource/context7-widget-angular`、`yarn add @desource/context7-widget-angular`、`bun add @desource/context7-widget-angular`
## README
# @ desource/context7-widget-angular (英语)
[](https://www.npmjs.com/package/@desource/context7-widget-angular) [](https://codecov.io/gh/DeSource-Labs/context7-widget) [](https://sonarcloud.io/summary/new_code?id=DeSource-Labs_context7-widget) [](https://context7.com/desource-labs/context7-widget) [](https://deepwiki.com/DeSource-Labs/context7-widget) [](https://github.com/DeSource-Labs/context7-widget/blob/main/LICENSE)
将上下文7 文档解答带入您的 Angular 应用程序, 并带有部件 符合它的设计。 自定义字体、颜色、布局和触发内容 本地独立组件.
## 为什么要使用这个部件 ?
上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 围绕该服务添加一个自由,自定义的界面.
您应该可以添加 Docs 聊天, 而无需在一个 精心设计的网站。 此软件包将扩展官方上下文7 部件 视觉控件并添加多行输入、答案和代码复制、停止、重试、, 以及尊重读者立场的滚动.
现有背景7用户可以 [替换脚本 URL](https://github.com/DeSource-Labs/context7-widget#existing-context7-widget-user) 或采用同一库和域设置的此组件。 新用户可以 将文档答案放入产品页和登入,帮助访问者 了解图书馆并尝试他们的第一个整合.
该组件使用 `OnPush`,表示输入和输入输出。 配置应用程序 默认为 `provideContext7Widget` 并使用可注射服务 方案控制。 共享核心套件处理对话状态, 运输、马克德和布局.
## 开始前
使用您在背景7上声称的图书馆 。 在其 **管理 – 聊天** 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 `/owner/repo` 以该图书馆的编号为例。 图书馆 仅索引无法在您的网站上聊天 . 见 [背景7 的部件设置](https://context7.com/docs/howto/chat-widget)。 。 。 .
## 安装
```bash
npm install @desource/context7-widget-angular
```
在应用程序构建中导入样式表一次 :
```css
@import '@desource/context7-widget-angular/styles.css';
```
需要角22号.
## 构成部分
```ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [Context7Widget],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
`
})
export class App {
trackQuestion(detail: Context7WidgetQuestionEventDetail): void {
console.log(detail.library, detail.question);
}
}
```
该部分暴露 `open`, (中文(简体) ), `close`, (中文(简体) ), `toggle`, (中文(简体) ), `send`, (中文(简体) ), `cancel`, (中文(简体) ), `retry`, (中文(简体) ), `reset`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`, (中文(简体) ), `getMessages`,以及 `subscribe` 通过a `viewChild(Context7Widget)` 参考文献.
## 应用程序默认
`provideContext7Widget` 不创建其他部件而默认供应 :
```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideContext7Widget } from '@desource/context7-widget-angular';
import { App } from './app';
bootstrapApplication(App, {
providers: [
provideContext7Widget({
launcherLabel: 'Ask docs',
preset: 'glass',
theme: 'auto'
})
]
});
```
明确的组件输入超过默认值 .
## 可注入控制
`Context7WidgetService` 解析声明部件 `widgetId` 并揭露 反应 `widget`, (中文(简体) ), `widgetId`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`,以及 `messages` 信号.
```ts
import { Component, inject } from '@angular/core';
import { Context7WidgetService } from '@desource/context7-widget-angular';
@Component({
selector: 'docs-actions',
standalone: true,
template: ``
})
export class DocsActions {
readonly docs = inject(Context7WidgetService);
async ask(): Promise {
this.docs.select('docs');
this.docs.open();
await this.docs.send('How do I configure the widget?');
}
}
```
该服务可拥有动态挂载的角元件:
```ts
const widget = docs.mount({
library: '/owner/repo',
position: 'center',
preset: 'terminal',
target: '#widget-root',
widgetId: 'docs'
});
await widget.send('Show the installation steps.');
docs.unmount('docs');
```
通话 `mount` 同样的 `widgetId` 更新并移动自有 组件. `unmount` 绝不删除模板中声明的组件. 程序安装需要浏览器文档 .
## 实例
### 受控能见度
当父方拥有能见度时使用角双向绑定 :
```ts
import { Component, signal } from '@angular/core';
import { Context7Widget } from '@desource/context7-widget-angular';
@Component({
selector: 'docs-shell',
standalone: true,
imports: [Context7Widget],
template: `
`
})
export class DocsShell {
readonly docsOpen = signal(false);
}
```
奥米 `open` 以初始化内部可见度 `defaultOpen`。 。 。 .
### 管理触发内容
导入 `Context7WidgetTrigger` 投射特定产品触发器时:
```ts
import { Component } from '@angular/core';
import { Context7Widget, Context7WidgetTrigger } from '@desource/context7-widget-angular';
@Component({
standalone: true,
imports: [Context7Widget, Context7WidgetTrigger],
template: `
Ask product docs
`
})
export class ProductDocs {}
```
### 外部触发
```html
```
ID 可能包含或省略 `#`。完整的 CSS 选择器,直接 `Element` 数值, 财务报告和审定财务报表 `ElementRef` 价值观也得到支持。 失踪选手离开 当目标进入文档时,内置发射器可见并绑定. 当触发器改变或 部件被销毁.
## 自定义
该组件将本地角 DOM 置于 `.context7-widget`;没有 覆盖核心自定义元素。 覆盖共享 CSS 变量或公共部分 :
```css
.context7-widget[widget-id='docs'] {
--c7-accent: #7cffb2;
--c7-panel-background: #101513;
--c7-panel-color: #f7f2e8;
--c7-border-color: rgba(247, 242, 232, 0.18);
--c7-panel-radius: 8px;
}
.context7-widget [part~='send-button'] {
min-width: 5rem;
text-transform: uppercase;
}
.context7-widget-trigger {
--c7-trigger-background: #111827;
--c7-trigger-color: #f8fafc;
--c7-trigger-focus: rgba(124, 255, 178, 0.42);
--c7-trigger-radius: 8px;
--c7-trigger-shadow: none;
}
```
见 [实时定制指南](https://context7.desourcelabs.com/customization) 每一个公共标志和部分.
## 投入和产出
本部分接受 `library`, (中文(简体) ), `theme`, (中文(简体) ), `preset`, (中文(简体) ), `position`, (中文(简体) ), `color`, (中文(简体) ), `customTrigger`, (中文(简体) ), `backdrop`, (中文(简体) ), `closeOnOutsideClick`, (中文(简体) ), `defaultOpen`, (中文(简体) ), `initialMessage`, (中文(简体) ), `labels`, (中文(简体) ), `launcherLabel`, (中文(简体) ), `launcherVariant`, (中文(简体) ), `linkBaseUrl`, (中文(简体) ), `panelHeight`, (中文(简体) ), `panelWidth`, (中文(简体) ), `placeholder`, (中文(简体) ), `title`, (中文(简体) ), `widgetId`,并控制 `open`。 。 。 .
产出为 `ready`, (中文(简体) ), `opened`, (中文(简体) ), `closed`, (中文(简体) ), `cancelled`, (中文(简体) ), `question`, (中文(简体) ), `firstToken`, (中文(简体) ), `answer`, (中文(简体) ), `answerComplete`, (中文(简体) ), `toolCall`, (中文(简体) ), `toolResult`, (中文(简体) ), `error`,以及 `openChange`。 。 。 . 每个生命周期或对话输出都收到相同的类型事件细节 由核心软件包. `openChange` 收到请求的布尔状态.
使用 `labels` 对可见和辅助字符串进行局部本地化。 相对 标记下链接与上下文7库页面相对应的解析,除非 `linkBaseUrl` 设置文档来源.
在响应流中,发送动作成为了启用的停止动作. 输入发送, Shift+ 输入新行、 已完成的答案和有栅栏的代码 块会显示复制动作,运输失败会显示重试。 读者意识 当有人向上移动并恢复对话时,自动滚动停止 下边。 居中部件陷阱焦点、 隔离外部内容和锁定文档 卷行会.
复制 `widgetId` 注册构成堆栈。 可注入控制解析 更新的部件,然后在更新的部件之后恢复先前的注册 被摧毁。 没有时, 默认查询会回到第一个可用的部件 部件使用 `default` 编号.
## 安全部门改革和包装
无害环境管理条目和申报在安全部门改革期间是安全的进口。 宣布的安全部门改革 不访问浏览器全域; 只访问浏览器的听众, 模式状态, 焦点, ,然后在视图初始化后启动约束. `Context7WidgetService.mount` 财务报告和审定财务报表 `unmount` 是客户端所有权 API.
角和角 `@desource/context7-widget/kit` 仍然是外部依赖,所以 应用程序可以复制Angular和树摇未用工具包模块。 样式 单独在 `@desource/context7-widget-angular/styles.css`。 。 。 .
## 数据流动和隐私
浏览器会发布已配置的库 ID 和当前对话信件 直接转到 `https://context7.com/api/v2/widget/chat`源代码实验室没有 代理聊天内容 。 该套件没有添加分析、饼干或持久性 浏览器存储 。 Evention 事件细节向主机披露问答 应用程序,因此该应用程序添加的日志或持久性成为 数据流动。 不发送机密或敏感个人数据.
## 相关软件包
- [`@desource/context7-widget`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/core) 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.
- [`@desource/context7-widget-vue`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/vue) 提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.
- [`@desource/context7-widget-nuxt`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/nuxt) 为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值.
- [`@desource/context7-widget-react`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/react) 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.
- [`@desource/context7-widget-svelte`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/svelte) 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器.
## 常见问题
### @desource/context7-widget-angular 是什么？
本地 Angular 组件和可自定义上下文7 文档聊天部件的可插入控制 \.
### 如何安装 @desource/context7-widget-angular？
在项目目录运行 npm install @desource/context7-widget-angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^22\.0\.0）、@angular/common（^22\.0\.0）、@angular/platform-browser（^22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @desource/context7-widget-angular 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @desource/context7-widget-angular 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @desource/context7-widget-angular 可以商用吗？
@desource/context7-widget-angular 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @desource/context7-widget-angular 的下载量有多少？
根据 npm 官方下载统计，@desource/context7-widget-angular 在 2026/10/12 – 2026/11/10 这 30 天内被下载 16,887 次，日均约 563 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @desource/context7-widget-angular 还在维护吗？
最新版本 0\.2\.3 发布于 2026/11/01（11 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/09/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。