介绍
angular2-components 是一个使用 TypeScript 开发的 UI 组件库，为 Angular 应用提供了一些基础组件，比如 Input、Button 等等。它采用了 Angular 2 的组件化开发思想，具有组件复用、可扩展、易维护等特点，非常适合开发中大型应用。
本教程将介绍如何使用 angular2-components。
安装
使用 npm 安装 angular2-components：
npm install --save angular2-components
注意，此包依赖于 Angular 2 至少 2.0.0-beta.17 版本。
使用
首先，需要在 Angular 应用中引入 angular2-components：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ----------- - ---- ----------------------
-----------
------------- ---------------
-------- -
--------------
------------
-----------
--
---------- --------------
--
------ ----- --------- - -这里我们使用了 InputModule，它提供了一个 Input 组件。在引入后，就可以在你的 Angular 应用中使用这个组件：
<ac-input></ac-input>
示例
我们来做一个简单的示例，使用 Input 组件收集用户的信息。首先，在我们的 app.component.html 模板中加入 Input 组件：
<ac-input [(ngModel)]="name" placeholder="Your Name"></ac-input> <ac-input [(ngModel)]="email" placeholder="Your Email"></ac-input> <button (click)="submitForm()">Submit</button>
在 app.component.ts 中，我们定义一下 name 和 email 属性，并添加 submitForm() 方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- -------
------ -------
------------ -
------------------ ------------- ------ ----------------
-
-这时运行应用，就会看到两个输入框和一个提交按钮。在输入框中填入信息，点击提交按钮，就可以在控制台看到我们收集到的信息了。
总结
angular2-components 提供了一些好用的组件，使用起来非常方便。在应用中使用组件，可以大大提升开发效率，让我们的应用更加易扩展、易维护。希望这篇教程能帮助你更好地学习和使用 angular2-components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551c381e8991b448cf24a