简介
npm 是目前前端开发中非常流行的包管理工具，发布在 npm 上的前端包数量已经十分庞大。在这里，我们介绍一款 npm 包，名为 bergben-angular2-file-drop，它是一个用于 Angular2+ 项目中实现拖拽上传文件的组件。本篇文章将介绍如何使用这个 npm 包。
安装
要使用这个 npm 包，我们首先需要将其安装到我们的项目中。可以使用以下命令：
npm install bergben-angular2-file-drop --save
使用
安装完成之后，我们需要在我们的项目中导入入口文件：
import { FileDropModule } from 'bergben-angular2-file-drop';接下来，在你的组件的 imports 中注入该模块即可开始使用：
@NgModule({
imports: [
FileDropModule
]
})现在，我们已经准备好使用 bergben-angular2-file-drop 组件了。
示例
为了更好地展示组件的使用方法，我们将提供一个简单的示例，演示如何在 Angular2+ 项目中使用 bergben-angular2-file-drop 这个组件。
- 首先，在你的项目中新建一个组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------------
--------- -
---------- ------------------------------
---- -----------------
----------
------
------------
--
--
------ ----- --------------------- -
------------------ --------- -
-- ------ -- ------------ - -- -
---------------------------
-- -------------
-
-
-我们在组件的模板中插入了 bergben-angular2-file-drop 组件，并注册了 files 事件，当用户拖拽文件时，onFilesDrop() 方法会被触发。
- 在定义好的组件中注入 bergben-angular2-file-drop 模块：
-- -------------------- ---- -------
------ - -------------- - ---- -----------------------------
-----------
------------- -
---------------------
--
-------- -
--------------
-
--- 最后，在主模块中注册该组件：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------------- - ---- -----------------------------
-----------
------------- -
-------------
---------------------
--
-------- -
--------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -此时，我们已经成功的将 bergben-angular2-file-drop 组件集成到我们的 Angular2+ 项目中。
总结
这篇文章介绍了如何使用 npm 包 bergben-angular2-file-drop，这是一个用于 Angular2+ 项目中实现拖拽上传文件的组件。我们使用了一个简单的示例来演示如何在 Angular2+ 项目中使用该组件。希望本文能够对初学者有所帮助，更多的组件库开发技巧和实践请关注我的博客。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005541681e8991b448d16f1