前言
在现代 Web 开发中，前端框架和库的使用已经变得非常普遍。很多时候，我们需要使用一些第三方库来实现某些功能。而通过 npm 安装这些库是一个非常方便快捷的方式。今天我们就来介绍一个 npm 包 - ng2-gravatar-directive-dev，它可以用来生成 Gravatar 头像图片。本文将详细介绍如何使用这个包。
什么是 Gravatar
Gravatar 是全球认可的头像服务，全称是 Globally Recognized Avatar，由 WordPress 的创始人 Matt Mullenweg 创建。基本原理就是把用户的 email 地址作为唯一标识，通过 MD5 哈希函数计算出一个唯一的字符串，然后将这个字符串作为参数和 Gravatar 服务器交互，就可以得到一个全球通用的头像。
安装
我们可以使用 npm 安装 ng2-gravatar-directive-dev，只需要执行以下命令即可：
npm install ng2-gravatar-directive-dev --save
使用
接下来我们将具体介绍如何在 Angular 2 应用中使用 ng2-gravatar-directive-dev。
1. 导入
安装完成后，在你的组件中导入 GravatarDirective：
import { GravatarDirective } from 'ng2-gravatar-directive-dev';2. 添加到 NgModule
添加 GravatarDirective 到 NgModule 的 declarations 中：
@NgModule({
declarations: [ GravatarDirective ],
...
})
export class YourModule { }3. 使用
在 HTML 中，通过 [gravatar] 指令来生成 Gravatar 头像，如下：
<img [gravatar]="'test@example.com'" [size]="100" [default]="'mm'">
- [gravatar] - 必须参数，指定 email 地址。
- [size] - 可选参数，头像尺寸，默认值为 80。
- [default] - 可选参数，当找不到匹配的头像时，显示的默认头像，可以是 '404'，'mm'（Mystery Man），'identicon'（随机几何图形），'monsterid'（随机怪物图像），'wavatar'（随机卡通头像），'retro'（像素风格头像），'blank'（空白头像）。
示例
下面是一个完整的示例，展示如何使用 ng2-gravatar-directive-dev：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -----------------------------
------------
--------- -----------
--------- -
---- ------------------------------- ------------ -----------------
-
--
------ ----- ------------ - -指导意义
通过本文，我们了解了什么是 Gravatar，以及如何使用 npm 包 ng2-gravatar-directive-dev 来生成 Gravatar 头像。通过类似的方式，我们可以使用更多的第三方库来实现我们所需要的功能。同时，我们还可以了解到 npm 的使用方法，以及在 Angular 2 中如何使用自定义指令。这对于我们学习和掌握前端技术都是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ebd81e8991b448dc768