# @angular-material-components/file-input 中文文档

规范地址：https://npmcn.com/package/%40angular-material-components/file-input/

版本：16\.0\.1
npm 元数据更新时间：2023-08-02T04:34:16.985Z
中文译文更新时间：2026-11-06T04:16:18.417Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40angular-material-components/file-input
原文对照：https://npmcn.com/package/%40angular-material-components/file-input/?lang=original
项目主页：https://github.com/h2qutc/angular-material-components
源码仓库：https://github.com/h2qutc/angular-material-components

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

- 包体积（解压后）：150 kB，24 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/platform-browser ^16\.0\.0，@angular/common ^16\.0\.0，@angular/core ^16\.0\.0，@angular/forms ^16\.0\.0，@angular/material ^16\.0\.0，@angular/cdk ^16\.0\.0
- 首次发布：2020-03-26T00:01:50.873Z
- 最新版本发布：2023-08-02T04:34:16.858Z
- 近 30 天下载量：6580（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 0 个）

## 中文简介

角材料文件输入

## 安装

```sh
npm install @angular-material-components/file-input
```

也可以使用：`pnpm add @angular-material-components/file-input`、`yarn add @angular-material-components/file-input`、`bun add @angular-material-components/file-input`

## README

# 角材料文件输入,用于@angular/材料 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x

[![Build Status](https://travis-ci.com/h2qutc/angular-material-components.svg?branch=master)](https://travis-ci.com/h2qutc/angular-material-components) [![License](https://img.shields.io/npm/l/angular-material-components.svg)](https://www.npmjs.com/package/angular-material-components) [![npm version](https://badge.fury.io/js/%40angular-material-components%2Ffile-input.svg)](https://www.npmjs.com/package/@angular-material-components/file-input)

## 说明

角材料文件输入.

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://www.buymeacoffee.com/h2qutc)

## 德莫尔

@ 见 [DEMO 堆点](https://stackblitz.com/edit/demo-ngx-mat-file-input)

@ 见 [现场直播](https://h2qutc.github.io/angular-material-components/)

![Alt Text](https://npmcn.com/package/%40angular-material-components/file-input/demo_file_input.png)

选择对应您的 Angular 版本的版本 :

| 角质 | @angular-material-组件/文件输入 |
| --- | --- |
| 16个 | 16.x+ (中文(简体) ) |
| 15个 | 15.x+ OR 9.x+ 用于遗留的导入 |
| 页:1 | 8.x+ 单曲 |
| 第13条 | 7.x+ (中文(简体) ) |
| 第12条 | 6.x+ 调取 |
| 第11个 | 5.x+ 时速 |
| 10个 | 4.x+ (中文(简体) ) |
| 第9条 | 2.x+ 时速 |
| 第8条 | 2.x+ 时速 |
| 第7条 | 2.x+ 时速 |

## 开始

```
npm install --save @angular-material-components/file-input
```

## 设置

```
import { NgxMatFileInputModule } from '@angular-material-components/file-input';

@NgModule({
   ...
   imports: [
        ...
        NgxMatFileInputModule
   ]
   ...
})
export class AppModule { }
```

@ 见 [src/app/demo文件输入/demo文件输入.module.ts](https://npmcn.com/package/%40angular-material-components/file-input/src/app/demo-fileinput/demo-fileinput.module.ts)

## 使用组件

### 文件输入( ngx- mat- 文件输入)

```
<mat-form-field>
   <ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept" [color]="color">
   </ngx-mat-file-input>
</mat-form-field>
```

#### 您可以使用指令提供自定义图标 _ngxMatFile 输入器_

```
<mat-form-field>
   <ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept"
   [color]="color">
      <mat-icon ngxMatFileInputIcon>folder</mat-icon>
   </ngx-mat-file-input>
</mat-form-field>
```

#### 您可以使用 MatForm Field 的所有属性, 如外观变体, 提示...

```
<mat-form-field appearance="outline">
  <ngx-mat-file-input [formControl]="file3Control">
  </ngx-mat-file-input>
  <mat-hint>Hint</mat-hint>
</mat-form-field>
```

#### @ 输入列表

| @ 输入 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| **已禁用** | 布尔 | 无效 | 如果选中的话, 文件输入只读 . |
| **多个** | 布尔 | 虚假 | 如果真实,文件输入允许用户选择多个文件. |
| **接受** | 字符串 | 无效 | 限制接受的文件类型(例如:接受="image/png,image/jpeg"或接受=.png,.jpg,.jpeg"——接受PNG或JPEG文件 |
| **颜色** | 主题标签 | 无效 | 组件的主题颜色调色板 . |

## 他们

-   @ 见@angular/材料 [使用预建的主题](https://material.angular.io/guide/theming#using-a-pre-built-theme)
-   在索引.html中添加材料设计图标字体

```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
```

## 许可证

麻省理工学院

## 常见问题

### @angular-material-components/file-input 是什么？

角材料文件输入

### 如何安装 @angular-material-components/file-input？

在项目目录运行 npm install @angular-material-components/file-input，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/platform-browser（^16\.0\.0）、@angular/common（^16\.0\.0）、@angular/core（^16\.0\.0）、@angular/forms（^16\.0\.0）、@angular/material（^16\.0\.0）、@angular/cdk（^16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @angular-material-components/file-input 支持 TypeScript 吗？

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

### @angular-material-components/file-input 支持 ESM 还是 CommonJS？

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

### @angular-material-components/file-input 可以商用吗？

@angular-material-components/file-input 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular-material-components/file-input 的下载量有多少？

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

### @angular-material-components/file-input 还在维护吗？

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