Angular 2+的Letter Avatar组件

Angular 2+的Letter Avatar组件
插件名称 Ng2-avatar
发布时间 2020年5月31日
插件作者 snics

Ng2-avatar是适用于Angular 2+应用程序的简单,轻便且可配置的字母头像组件。受到Google应用程序的启发。

安装:

# NPM
$ npm install ng2-avatar --save

安装后,您需要导入主模块:

import { AvatarModule } from 'ng2-avatar';

剩下的唯一部分是在应用程序模块中列出导入的模块。对于根(顶层)模块,确切的方法将略有不同,对于该模块,您最终应使用类似于(notice AvatarModule.forRoot())的代码:

import { AvatarModule } from 'ng2-avatar';

@NgModule({
  declarations: [
    AppComponent, 
    ...
  ],
  imports: [
    AvatarModule.forRoot(), 
    ...
  ],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

您的应用程序中的其他模块可以简单地导入AvatarModule

import { AvatarModule } from 'ng2-avatar';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [AvatarModule, ...], 
})
export class OtherModule {
}

使用

 <avatar [email]="email" [displayType]="'circle'"></avatar>
 <input type="email" [(ngModel)]="email">

设置

配置选项 类型 默认值 描述
email String none 该电子邮件用于生成首字母或从Gravatar API获取图片(必填)
name string none 此名称用于生成首字母(必填)
size number 100 图片和头像的大小
background string Random color 字母的头像的背景色
displayType string circle none, circle, rounded
letter string ? 这些是默认字母
defaultProtocol string null 指定协议或为协议无关的空网址