环境搭建
使用尼日利亚新cc-二维码创建一个项目尼日利亚新cc-二维码
开发组件
在项目src/app/shard目录中，使用命令ng g模块二维码创建一个二维码模块ng g模块二维码2.在项目src/app/分片（分片自己创建一个目录)目录中，使用命令ng g分量二维码创建一个二维码组件，删除没用的qrcode.component.html和qrcode.component.xxx样式文件，因为我们这个二维码组件不需要这个，只要有分时（同分时)里面实现就可以了，所以删除！
ng g分量二维码
3.由于我们的组件依赖于第三方的qrious插件，所以需要通过国家预防机制安装qrious -保存安装。
国家预防机制安装qrious -保存
4.在之前创建的qrcode.component.ts中，实现二维码，具体的内容如下。
//这里引入的是有角的模块的内容
从“@棱角分明/核心”导入{组件、OnInit、Input、ElementRef、OnChanges、OnDestroy、简单更改}；
//这里引入我们安装的第三方二维插件
从“QRious”导入QRious
/**
* 二维码
*/
@组件({ 0
选择器： ' cc-二维码，
template: `` //这里不需求模板，所以放空，如果觉得这个不好看，可以使用指令的方式实现
})
导出类QrcodeComponent实现OnChanges，OnDestroy {//这里实现了变更与OnDestroy接口，一个是用于监听参数改变用的，一个是销毁组件用的
//二维码值参数
@Input()值=' ';
//二维码背景颜色，默认我们给个白色
@Input()背景='白色；
//二维码前景色，也就是图案的颜色，默认我们给个黑色
@Input()前景='黑色
//二维码背景透明度，取值范围是0-1.0之间
@ Input()背景alpha=1.0
//二维码前景的透明度，取值范围是0-1.0之间
@ Input()前景alpha=1.0
//二维码的误差校正级别（左、中、右、高)
@Input()级别=' L '
//生成的图片类型，默认图像/png
@ Input()mime=' image/png '；
//内边距
@Input()填充=0;
//二维码大小（宽高)
@Input()大小=100;
//是否使用画布生成，默认为假的，图片方式
@ Input()canvas=false；
//二维码实例对象
qr: QRious
构造函数（私有elementRef: ElementRef) { }
ngOnChanges(变更：简单变更): void {
//这里判断参数是否改变
如果(变化。背景| |变化。背景alpha | |变化。前景| |
变化。foregroundAlpha | |更改。级别| |更改。mime | |
变化。填充| |更改。大小| |变化。值| |更改。画布){ 0
这个。QR coded build()；
}
}
//二维码构造的方法
qrcodedBuild(): void {
//这里获取元素对象
const element : HTMlelement=this。ElEMENTReF。原生元素；
//清空里面的内容
element.innerHTML=
//为二维码插件初始化
this.qr=新的Qrius({ 0
背景技术在这个背景下，
背景阿尔法：这个背景阿尔法，
前景这个前景，
foregroundAlpha:这个。foregroundAlpha，
高度：这个高度，
mime:这个。哑剧，
填充：这个。填充，
尺码：这个。尺码，
这个值
});
//判断是否需要使用画布的方式，默认使用的是图片方式
如果(这个。画布){ 0
元素。appendchild(这个。二维码。帆布)；
} else {
元素。appendchild(这个。二维码。图像)；
}
}
//将二维码转换成base64编码
todaytaul(:)字符串{ 0
返回这个。二维码。TotaToul()；
}
//这里要销毁组件
ngOnDestroy(){ 0
this.qr=null
}
}
组件的使用
1.使用时只需要引入模块，然后就可直接在超文本标记语言中使用了//业务模块
从" @angular/platform-browser "导入{ BrowserModule }；
从“@棱角分明/核心”导入{ ng module }；
//引入模块
从""导入{ QrcodeModule } ./分片/二维码/二维码。模块'；
从""导入{ AppComponent } ./app。组件'；
@ ng模块({ 0
声明： [
AppComponent
],
进口： [
浏览器模块，
QrcodeModule
],
providers: []，
bootstrap: [AppComponent]
})
导出类AppModule { }
//业务超文本标记语言
差异
cc-qrcd[值]=' 12345 6789 ' '/cc-QC rcd
/div