# @flowjs/ngx-flow 中文文档
规范地址：https://npmcn.com/package/%40flowjs/ngx-flow/
版本：21\.0\.0
npm 元数据更新时间：2026-05-24T10:50:58.825Z
中文译文更新时间：2026-11-15T00:32:25.705Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40flowjs/ngx-flow
原文对照：https://npmcn.com/package/%40flowjs/ngx-flow/?lang=original
项目主页：https://github.com/flowjs/ngx-flow#readme
源码仓库：https://github.com/flowjs/ngx-flow
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：36.3 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common ^21\.0\.0，@angular/core ^21\.0\.0，@flowjs/flow\.js ^2\.14\.0
- 首次发布：2018-09-20T14:32:16.662Z
- 最新版本发布：2026-05-24T10:50:58.662Z
- 近 30 天下载量：61318（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 1 个）
## 中文简介
此软件包的目的是为 Angular 创建用于文件加载的包装器 [流动。 js](https://github.com/flowjs/flow.js)。 。 。 .
## 安装
```sh
npm install @flowjs/ngx-flow
```
也可以使用：`pnpm add @flowjs/ngx-flow`、`yarn add @flowjs/ngx-flow`、`bun add @flowjs/ngx-flow`
## README
# Ngx花纹
此软件包的目的是为 Angular 创建用于文件加载的包装器 [流动。 js](https://github.com/flowjs/flow.js)。 。 。 .
[](https://travis-ci.com/flowjs/ngx-flow) [](https://codeclimate.com/github/flowjs/ngx-flow/test_coverage) [](https://codeclimate.com/github/flowjs/ngx-flow/maintainability) [](https://github.com/prettier/prettier)
## 演示
[https://stackblitz.com/edit/ngx-flow-example 页面存档备份,存于互联网档案馆](https://stackblitz.com/edit/ngx-flow-example)
您也可以在 `src` 文件夹.
## 路线图
- qq 上传单文件
- qq 上传多个文件
- qq 队列管理
- qq 错误处理
- qq 暂停/ 恢复上传
- qq 取消上传, 取消所有上传
- qq 上传进度
- qq 文件/ 目录限制
- qq 拖放( d)
- qq 显示上传图像
- 测试
- 在选择文件后右上传qq
- 使用 TravisCI 运行测试
- 使用 Stackblitz 演示
- qq 支持服务器侧面渲染
## 安装
`npm install @flowjs/flow.js @flowjs/ngx-flow`
在模块中导入 :
```typescript
import { NgxFlowModule, FlowInjectionToken } from '@flowjs/ngx-flow';
import Flow from '@flowjs/flow.js';
@NgModule({
imports: [NgxFlowModule],
providers: [
{
provide: FlowInjectionToken,
useValue: Flow
}
]
})
export class AppModule
```
我们使用依赖性注射来提供流.js库.
## 如何使用
1. 启动服务器 。 有一个服务器实例取自 [流动。 js](https://github.com/flowjs/flow.js) 在这里 `server` 目录。 在此重存中, 您可以使用 `npm run server`。 。 。 .
2. 首先, 您需要初始化 ngx 流程指令并导出, 例如 `flow` 变量 :
```html
```
3. 现在您可以使用任一指令 `flowButton` 用于选择文件对话框 :
```html
```
或者说 `flowDrop` 用于拖放特性 :
```html
```
都得通过 `[flow]=flow.flowJs` 地点 `flow` 是第 1 步导出的模板变量.
4. 您无法订阅可观察的转让:
```html
```
5. 在添加文件后, 您可以开始使用上传 `upload()` 方法 :
```html
```
### 怎么样 `transfers$` 数据看起来像?
可观察 `flow.transfers$` 形式状态 :
```typescript
{
totalProgress: 0.5,
transfers: [
{
name: "somefile.txt",
flowFile: FlowFile,
progress: number,
error: boolean,
paused: boolean,
success: boolean,
complete: boolean,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
},
{
name: "uploading.txt",
flowFile: FlowFile,
progress: 0.5,
error: false,
paused: false,
success: false,
complete: false,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
},
{
name: "failed-to-upload.txt",
flowFile: FlowFile,
progress: number,
error: true,
paused: false,
success: false,
complete: true,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
}
{
name: "uploaded.txt",
flowFile: FlowFile,
progress: number,
error: false,
paused: false,
success: true,
complete: true,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
}
],
flow: { /* flow.js instance*/ }
}
```
## 财务问题
### 我需要访问 group.js 对象
你可以从下面找到 `flow` 变量.
```html
Is flowjs supported by the browser? {{flow.flowJs?.support}}
```
### 我看到上传过程中的闪烁
使用 `trackBy` 页:1 `ngFor`数字 :
```html
```
```typescript
export class AppComponent {
trackTransfer(transfer: Transfer) {
return transfer.id;
}
}
```
### 我需要一个文件
添加 `singleFile: true` 到您的流量配置 :
```html
```
### 我要上传整个目录
添加 `flowDirectoryOnly="true"` 转到您的按钮 :
```html
```
### 我要显示要上传的图像
使用指令 `flowSrc`数字 :
```html
```
### 选择文件后如何触发上传?
订阅 `events$`. NgxFlow 收听这些活动: `filesSubmitted`, (中文(简体) ), `fileRemoved`, (中文(简体) ), `fileRetry`, (中文(简体) ), `fileProgress`, (中文(简体) ), `fileSuccess`, (中文(简体) ), `fileError` 流动的Js。 活动 `fileSubmitted` 当用户丢弃或选择文件时,会开火.
```typescript
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('flow')
flow: FlowDirective;
autoUploadSubscription: Subscription;
ngAfterViewInit() {
this.autoUploadSubscription = this.flow.events$.subscribe((event) => {
if (event.type === 'filesSubmitted') {
this.flow.upload();
}
});
}
ngOnDestroy() {
this.autoUploadSubscription.unsubscribe();
}
}
```
### 发展
`npm run build` - 将库建入 dist 文件夹
在此之后, 您可以发布到 npm 仓库 `dist` 文件夹 :
```
cd dist/ngx-flow
npm publish
```
## 常见问题
### @flowjs/ngx-flow 是什么？
此软件包的目的是为 Angular 创建用于文件加载的包装器 流动。 js。 。 。 \.
### 如何安装 @flowjs/ngx-flow？
在项目目录运行 npm install @flowjs/ngx-flow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^21\.0\.0）、@angular/core（^21\.0\.0）、@flowjs/flow\.js（^2\.14\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @flowjs/ngx-flow 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @flowjs/ngx-flow 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @flowjs/ngx-flow 可以商用吗？
@flowjs/ngx-flow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @flowjs/ngx-flow 的下载量有多少？
根据 npm 官方下载统计，@flowjs/ngx-flow 在 2026/10/15 – 2026/11/13 这 30 天内被下载 61,318 次，日均约 2,044 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @flowjs/ngx-flow 还在维护吗？
最新版本 21\.0\.0 发布于 2026/05/24（5 个月前）；至今共发布 25 个版本，其中过去 12 个月发布了 1 个；首次发布于 2018/09/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。