# @filestack/angular 中文文档

规范地址：https://npmcn.com/package/%40filestack/angular/

版本：4\.0\.0
npm 元数据更新时间：2026-07-28T16:39:56.683Z
中文译文更新时间：2026-11-14T17:52:02.173Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40filestack/angular
原文对照：https://npmcn.com/package/%40filestack/angular/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：102 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>=19\.0\.0，@angular/core \>=19\.0\.0，filestack-js \>3\.0\.0
- 首次发布：2019-07-25T13:17:34.417Z
- 最新版本发布：2026-07-28T16:39:56.442Z
- 近 30 天下载量：11155（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 6 个）

## 中文简介

# flatack- 外形

Angular 组件库,可以方便地将强大的 flatack- api 集成到您的应用程序中 .

## 安装

```sh
npm install @filestack/angular
```

也可以使用：`pnpm add @filestack/angular`、`yarn add @filestack/angular`、`bun add @filestack/angular`

## README

# flatack- 外形

Angular 组件库,可以方便地将强大的 flatack- api 集成到您的应用程序中 .

**目录**

-   [概览](https://npmcn.com/package/%40filestack/angular/#readme-overview)
-   [使用量](https://npmcn.com/package/%40filestack/angular/#readme-usage)
    -   [安装](https://npmcn.com/package/%40filestack/angular/#readme-installation)
    -   [光盘N](https://npmcn.com/package/%40filestack/angular/#readme-cdn)
    -   [现有投入](https://npmcn.com/package/%40filestack/angular/#readme-available-inputs)
    -   [可用产出](https://npmcn.com/package/%40filestack/angular/#readme-available-outputs)
    -   [文件ack 服务](https://npmcn.com/package/%40filestack/angular/#readme-FilestackService)
    -   [实例](https://npmcn.com/package/%40filestack/angular/#readme-examples)
-   [文档](https://npmcn.com/package/%40filestack/angular/#readme-documentation)
-   [发展](https://npmcn.com/package/%40filestack/angular/#readme-development)
-   [捐款](https://npmcn.com/package/%40filestack/angular/#readme-contributing)

## 概览

flatack-angular 是一种包装 [filtack-js 存档副本](https://github.com/filestack/filestack-js) sdk 允许您在几行代码中与 flatack 服务集成 。 几乎你能够做的 [filtack-js 存档副本](https://filestack.github.io/filestack-js/index.html) 您也可以使用此组件.

此寄存器包含有两个项目的角工作空间:

-   `filestack-angular` 包含 `FilestackAngularModule` 通过 npm 发布
-   `example` 显示使用实例的 angular app `FilestackModule` 特性

`FilestackAngularModule` 包含

-   **文件ack 服务** - 用于 flatack-js 客户端类的包件,并增加了对可观察器的支持
-   **文件tack 变形Pipe** - 方便创建url的管道 [转换](https://www.filestack.com/docs/api/processing/) 在模板中
-   **Picker 重叠组件** - 将在覆盖模式下打开的 Filetack 拾取器组件
-   **Picker 内置组件** - 将在提供的html容器中打开的Filetack拾取器组件
-   **Picker DropPane 组件** - 将打开在所提供 html 容器中的 Filetack 投放窗格组件 如果需要,也可以独立使用

## 使用量

### 安装

通过国家预防机制安装 `filestack-js` SDK 作为依赖自动安装)

```bash
npm install filestack-js
npm install @filestack/angular
```

包含 `FilestackModule` 内 `app.module.ts`

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FilestackModule } from '@filestack/angular';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FilestackModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

在.html文件中使用

```html
<ng-picker-overlay
  apikey="YOUR_API_KEY">
</ng-picker-overlay>
```

### 光盘N

如果您想导入 `filestack-module` 将文件直接捆绑到您的应用程序 而不是使用 npm 软件包, 您可以在 cdn 上找到它 :

```
https://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js
```

```
https://static.filestackapi.com/filestack-angular/{MODULE_VERSION}/filestack-angular.umd.min.js.map
```

其中 {MODULE VERSION} 是此套件的理想版本

### 现有投入

| 名称 | 类型 | 需求 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| 键 | 字符串 | 对 |  | 文件存储 api 密钥 |
| 选项 | 对象 |  |  | 检查 [选择](https://filestack.github.io/filestack-js/interfaces/pickeroptions.html) |
| 客户端选项.cname | 字符串 |  |  | 检查 [名称](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#cname) |
| 客户端选项.security | 对象( E)[警卫](https://filestack.github.io/filestack-js/interfaces/security.html)(中文(简体) ) |  |  | 检查 [警卫](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#security) |
| 客户端选项. sessionCache | 布尔 |  |  | 检查 [会话缓存](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#sessioncache) |
| 文件 | [输入文件](https://filestack.github.io/filestack-js/globals.html#inputfile) |  |  |  |
| 来源 | 字符串 |  |  | Filetack 控件或外部url. 用于“ 转换 ” 、 “ 移动 ” 、 “ 元数据 ” 或“ 审查” 动作 |

### 可用产出

| 名称 | 类型 | 需求 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| 上传成功 | 议题 |  |  | 一个在上传事件上发布的主题 |
| 上传错误 | 议题 |  |  | 一个在上传错误事件上发布的主题 |

### 文件ack 服务

这个 `FilestackService` 是文件tack-js上的适配器 [客户类](https://filestack.github.io/filestack-js/classes/client.html) 并允许你与可观察者共事,而不做诺言. 方法获得与客户类方法相同的输入参数.

| 方法 | 返回时 | 说明 |
| --- | --- | --- |
| 输入 | 无效 | 用您的 apike 输入文件存储客户端 |
| 拾取器 | [拾取器](https://filestack.github.io/filestack-js/interfaces/pickerinstance.html) | 打开或关闭拾取器实例 |
| 转换 | 字符串 | 创建转换 URL |
| 检索 | 可观察 | 获取有关文件夹手柄的信息 |
| 元数据 | 可观察 | 通过文件的 Filetack 手柄访问文件 |
| 存储URL | 可观察 | 获取关于一个文件处理元数据的信息 |
| 上传 | 可观察 | 将文件上传到文件夹 |
| 删除 | 可观察 | 从文件夹中删除文件 |
| 删除金属数据 | 可观察 | 只从 Filetack 系统中删除文件 。 文件仍在存储中 . |
| 预览 | HTMLIFrame 元素 | 窗口 |
| 登录 | 可观察 | 清除拾取器的云段 |
| 设置 | [客户权益](https://filestack.github.io/filestack-js/classes/client.html) | 将已有客户端实例放入文件ack服务 |

### 实例

下面可以找到一些基本的例子.

您也可以在 `angular-filestack-example` 应用

要运行本地类型

```
ng serve filestack-angular-example
```

之后访问

```
http://localhost:4200/
```

#### 组件初始化后直接打开拾取器

`component.ts`

```typescript
export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }
}
```

`component.html`

```html
<ng-picker-overlay
  [apikey]="apikey">
</ng-picker-overlay>
```

#### 点击自定义按钮打开拾取器

`component.ts`

```typescript
export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
    this.onSuccess = (res) => console.log('###onSuccess', res);
    this.onError = (err) => console.log('###onErr', err);
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}
```

`component.html`

```html
<ng-picker-overlay
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button>Open picker</button>
</ng-picker-overlay>
```

#### 在内线模式下打开拾取器

`component.ts`

```typescript
export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}
```

`component.html`

```html
<ng-picker-inline
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
  <button>Open picker</button>
</ng-picker-inline>
```

#### 以倒放相框模式打开拾取器

`component.ts`

```typescript
export class AppComponent implements OnInit {
  apikey: string;

  ngOnInit() {
    this.apikey = 'YOUR_API_KEY';
  }

  onUploadSuccess(res: object) {
    console.log('###uploadSuccess', res);
  }

  onUploadError(err: any) {
    console.log('###uploadError', err);
  }
}
```

`component.html`

```html
<ng-picker-drop-pane
  [apikey]="apikey"
  (uploadSuccess)="onUploadSuccess($event)"
  (uploadError)="onUploadError($event)">
</ng-picker-drop-pane>
```

#### 使用 filetack 变形管转换 url

`component.ts`

```typescript
...
import { TransformOptions } from 'filestack-js';

export class AppComponent implements OnInit {
  transformOptions: TransformOptions;

  constructor(private filestackService: FilestackService) {}

  ngOnInit() {
    this.transformOptions = {
      resize: {
        width: 400
      },
      sepia: {
        tone: 80
      }
    }
  }
}
```

`component.html`

```html
  <img src="{{'5aYkEQJSQCmYShsoCnZN' | filestackTransform: transformOptions}}">
```

#### 使用 sdk 客户端.upload () 选择文件和上传

`component.ts`

```typescript
export class AppComponent implements OnInit {
  file: any;

  constructor(private filestackService: FilestackService) {}

  ngOnInit() {
    this.filestackService.init('YOUR_API_KEY'); 
  }
  fileChanged(e) {
    this.file = e.target.files[0];
  }
  uploadFile() {
    this.filestackService.upload(this.file)
      .subscribe(res => console.log(res));
  }
}
```

`component.html`

```html
  <input type='file' (change)="fileChanged($event)">
  <button (click)="uploadFile()">Upload file</button>
```

## 文档

您可以在 [https://filestack.github.io/filestack-js/ 页面存档备份,存于互联网档案馆](https://filestack.github.io/filestack-js/)

## 发展

在添加更改后 `FilestackAngularModule` 在/项目/文件ack-angular/src中

您需要构建此模块

```
ng build filestack-angular
```

此命令将生成 /dist 的 conatins 准备使用 flatack 模块

您可以通过检查示例来检查其正确性 `example` 应用 :

1.  更新 api 密钥 `/projects/example/src/app/app.component.ts`
    
2.  开始本地应用
    

```
ng serve example
```

3.  访问 [http://localhost:4200/ (英语)](http://localhost:4200/)

## 捐款

你的任何贡献或想法都非常受欢迎。 请考虑我们遵循常规承诺的具体规定,以确保一致的承诺信息和更改日志格式.

## 常见问题

### @filestack/angular 是什么？

flatack- 外形 Angular 组件库,可以方便地将强大的 flatack- api 集成到您的应用程序中 \.

### 如何安装 @filestack/angular？

在项目目录运行 npm install @filestack/angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>=19\.0\.0）、@angular/core（\>=19\.0\.0）、filestack-js（\>3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @filestack/angular 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @filestack/angular 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @filestack/angular 可以商用吗？

@filestack/angular 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @filestack/angular 的下载量有多少？

根据 npm 官方下载统计，@filestack/angular 在 2026/10/15 – 2026/11/13 这 30 天内被下载 11,155 次，日均约 372 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @filestack/angular 还在维护吗？

最新版本 4\.0\.0 发布于 2026/07/29（3 个月前）；至今共发布 26 个版本，其中过去 12 个月发布了 6 个；首次发布于 2019/07/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。