在前端开发中，经常需要使用一些别人已经写好的代码库，以便快速搭建自己的应用程序。npm 是目前最流行的 node.js 包管理器，在其中可以找到许多优秀的前端类 npm 包，其中包括了 ng2-library-demo，这是一个 Angular2 组件库的 demo 示例代码。本文将为你详细地介绍如何使用它，以及它对你的开发工作有何指导意义。
安装 ng2-library-demo
首先，需要在 npm 目录下执行以下安装命令：
npm install ng2-library-demo
使用 ng2-library-demo
安装完成之后，就可以开始使用 ng2-library-demo 了。它包含了多个 Angular2 组件，供你在自己的应用程序中使用。
导入组件
为了使用组件，需要先在你的应用程序中导入它们。这是一个例子：
import { Component1 } from 'ng2-library-demo';
import { Component2 } from 'ng2-library-demo';这里导入了两个组件，分别是 Component1 和 Component2。
在模板中使用组件
现在，可以在应用程序的模板中使用导入的组件：
<component1></component1> <component2></component2>
这里用了引入的两个组件，分别是 Component1 和 Component2。
ng2-library-demo 可示范的哪些内容
在学习 ng2-library-demo 过程中，你将会学到 Angular2 组件的设计和实现方式，以及如何从常规 JavaScript 代码中生成它们。此外，ng2-library-demo 也包含了一些 Angular2 特性的示范，例如依赖注入，模板驱动表单和路由器等。
示例代码
这是一个简单的示例代码，它演示了如何使用 ng2-library-demo 中的 Component1 组件。
app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- -------------------
-----------
-------- -
-------------
--
------------- -
-------------
----------
--
---------- --------------
--
------ ----- --------- - -app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<component1></component1>'
})
export class AppComponent {
}index.html
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------
-------
------
---------------------------
-------
-------总结
通过学习和使用 ng2-library-demo，你可以熟悉 Angular2 组件的设计和实现方法，并了解许多其他 Angular2 特性的实现方式。这个 npm 包示范了如何构建可以共享和重用的组件库，同时也为你在实际开发中节省了大量的时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e981e8991b448e094d