简介
在前端开发中，经常需要使用到各种第三方库。其中一个非常常用的包管理工具是 npm，而其中一个重要的 package 是 Angular，这个框架提供了很多有用的组件和功能。
在本文中，我们将介绍如何使用一个名为 angular2-header-library 的 npm 包来实现一些常见的网站功能。
安装
为了使用 angular2-header-library，我们需要在项目中安装该包。要安装它，我们需要先打开我们的项目文件夹，然后输入以下命令：
npm install angular2-header-library --save
这将安装文件和将该库列为项目的依赖项之一。
使用
接下来，我们需要在我们的项目中引入该库。在 app.module.ts 文件中，引入该库并将它添加为我们的 AppModule 的 imports 之一。这是我们需要做的：
-- -------------------- ---- -------
------ - ------------ - ---- --------------------------
-----------
------------- -
---
--
-------- -
--------------
------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -我们现在已经允许使用该组件了！
组件列表
该库包含了几个组件，可以在任何类型的 Angular 2 项目中使用。
Header Component
<lib-header [brandText]="'Angular Header'"></lib-header>
在你的项目中使用这个组件非常简单，这是一个基本的例子，它会在您的应用程序中添加一个 header，它显示 “Angular Header” 文本作为网站品牌。
该组件也允许您添加和自定义徽标图像和菜单项，您可以从您的项目自定义这些，并合并其他库中的样式。
Menu Item Component
<lib-menu-item [text]="'Home'" [routeLink]="'/'"></lib-menu-item>
应该很容易地看到，此代码会在您的应用程序中添加一个名为“Home”的菜单项。您可以根据需要添加更多的菜单项，以及根据你的喜好自定义各种属性。
示例代码
以下是一个完整的示例代码，演示了如何将该库添加到我们的应用程序中，以及如何使用它的组件。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- ----------------- - ---- --------------------------
-----------
------------- -
-------------
-----------------
--
-------- -
--------------
------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -<app-header> <lib-menu-item [text]="'Home'" [routeLink]="'/'"></lib-menu-item> <lib-menu-item [text]="'About'" [routeLink]="'/about'"></lib-menu-item> <lib-menu-item [text]="'Contact'" [routeLink]="'/contact'"></lib-menu-item> </app-header>
总结
在本文中我们讲了如何使用并安装一个名为 angular2-header-library 的 npm 包。我们看了看如何在我们的 Angular 2 项目中添加一个 header，以及如何在里面添加菜单项。我们可以将这个库用于实现我们的网站，以实现一个漂亮的、易于导航的界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554481e8991b448d2794