前言
angular2-library-sample是一个基于angular2的npm包，主要作用是为angular2开发者提供一种快速搭建angular2组件库的方法，使用起来非常方便。本教程将会介绍如何安装和使用angular2-library-sample，并且会提供一些示例代码帮助读者更好地理解。
安装
在使用angular2-library-sample之前，我们需要先进行安装：
npm install angular2-library-sample --save
使用
Step 1：创建一个新的Angular项目
首先，我们需要创建一个新的Angular项目：
ng new <project-name>
Step 2：将angular2-library-sample集成到项目中
然后，我们需要将angular2-library-sample集成到项目中：
ng2docs init
执行完上述命令后，一个名为ng2docs的文件夹将会出现在项目根目录中。此时，我们需要将ng2docs文件夹中的src/app/app.module.ts文件中的import { AppComponent } from './app.component';行删除，同时将import { Ng2DocsModule } from 'ng2-docs';行改成import { Ng2DocsModule } from 'angular2-library-sample';。
最后，在app.module.ts中添加以下代码：
-- -------------------- ---- -------
-----------
-------- -
--------------
------------
-----------
-----------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -Step 3：编写组件
现在，我们已经将angular2-library-sample集成到项目中了。接下来，我们需要编写组件了。
在项目根目录下创建一个名为my-lib的文件夹，并在该文件夹下创建一个名为my-component的文件夹。在my-component文件夹中创建以下文件：
- my-component.component.ts
- my-component.component.html
在my-component.component.ts中创建以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
------------ -----------------------------
--
------ ----- ----------- -
----- -------
------------- -
--------- - --------
-
-在my-component.component.html中创建以下代码：
<h1>Hello, {{name}}!</h1>Step 4：使用组件
组件编写完毕后，我们需要在项目中使用该组件。在app.component.html文件中添加以下代码：
<my-component></my-component>
然后在app.component.ts文件中添加以下代码：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
}最后，我们就可以运行ng serve，然后在浏览器中打开http://localhost:4200，就可以看到我们的组件已经呈现在页面上了。
总结
通过以上步骤，我们可以快速地将angular2-library-sample集成到自己的项目中，并且编写并使用一个组件。相信这个npm包可以帮助很多angular2开发者快速搭建自己的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552e081e8991b448d049b