Angular2生成二维码

使用Angular2生成二维码还是比较容易的，目前Angular2中有两个库提供支持，一个是angular2-qrcode（不支持中文），一个是ng2-qrcode。

安装

在项目中打开“终端”，运行以下命令：
安装angular2-qrcode

npm install angular2-qrcode --save

安装ng2-qrcode

npm install ng2-qrcode --save

使用

使用angular2-qrcode首先需要在使用到的模块中引用注册，而ng2-qrcode则不用：

import { NgModule } from '@angular/core';
import { QRCodeModule } from 'angular2-qrcode';
...

@NgModule({
    imports: [
        QRCodeModule,
        ...
    ],
    ...
})

然后便可以在需要的html页面中使用了，这里angular2-qrcode和ng2-qrcode的使用完全一致：

<div>
    <qr-code [data]="'All QR Code data goes here!'" [size]="150"></qr-code>
</div>

angular2-qrcode和ng2-qrcode均采用Input的方式接收参数，不过参数略有不同：

angular2-qrcode可以接收的参数：

参数名	参数类型	参数说明
data	String	要转成二维码的文字
size	Number	要转成的二维码图片的大小
level	String	要转成的二维码的质量等级（'L', 'M', 'Q', 'H'）（可以为空）
type	Number	要转成二维码的文字对应的缓冲区的大小（可以为空）

ng2-qrcode可以接收的参数：

参数名	参数类型	参数说明
qrdata	String	要转成二维码的文字
size	Number	要转成的二维码图片的大小
level	String	要转成的二维码的质量等级（'L', 'M', 'Q', 'H'）
colorlight	String	输出的二维码图片中高亮部分的颜色（可以为空）
colordark	String	输出的二维码图片底色的颜色（可以为空）
usesvg	Boolean	是否输出svg图片（可以为空）

注：
二维码的质量等级指的是二维码的容错率：

• L：容错率7%
• M：容错率15%
• Q：容错率25%
• H：容错率30%