简介
Angular2-library-demo 是一个基于 Angular2 框架开发的 npm 包，简化了 Angular2 应用的开发过程。包含了一些常用的组件和服务，如按钮、表单控件、模态框、HTTP 请求等等。
本文将介绍如何通过 npm 安装和使用该库，并通过一些示例代码展示如何使用这些组件和服务。
安装
在使用之前，我们需要安装该 npm 包。在命令行中输入以下命令：
npm install angular2-library-demo --save
导入
在 src/app/app.module.ts 中导入所需的模块和服务：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ---------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------------
------ - ----------- - ---- ------------------------
------ - ---------- - ---- ------------------------
------ - ----------- - ---- ------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-----------
-------------
------------
----------
--
---------- -
-----------
--
---------- --------------
--
------ ----- --------- - -使用组件
Button 组件
<app-button color="primary" (click)="onClick()">Click Me!</app-button>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------- --------------- ------------------------- ----------------
-
--
------ ----- ------------ -
--------- -
------------------- -- -----------
-
-Modal 组件
<app-modal [title]="'Modal Title'"> <p>Modal Body</p> </app-modal>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------- --------------- --------
-------- --------
------------
-
--
------ ----- ------------ --Form 表单
<app-form (submit)="onSubmit($event)"> <input type="text" name="name" placeholder="Name" required> <input type="email" name="email" placeholder="Email" required> <button type="submit">Submit</button> </app-form>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------- ----------------------------
------ ----------- ----------- ------------------ ---------
------ ------------ ------------ ------------------- ---------
------- -----------------------------
-----------
-
--
------ ----- ------------ -
--------------- -
-----------------------
-----------------------------------
-
-使用服务
HttpService 请求服务
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------------
------------
--------- -----------
--------- -
------- ----------------------- -------------
-
--
------ ----- ------------ -
------------------- ------------ ------------ --
--------- -
------------------------------------------------------------------
-----------
---- -- ------------------
----- -- --------------------
--
-
-总结
在本文中，我们介绍了如何通过 npm 安装和使用 Angular2-library-demo 库，并展示了一些常用的组件和服务的使用方法。希望这篇文章对你的 Angular2 开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3081e8991b448daeea