Angular6二維碼組件

需求：

     Angular6框架下可以根據內容生成對應的二維碼。

方案：

     這個我們直接使用 angular2-qrcode插件就可以。

具體使用過程：

1、首先安裝 angular2-qrcode

npm install angular2-qrcode

 2、其次，在app.module.ts中引入QRCodeModule 模塊

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

...

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

3、然後，在html模板文件中定義二維碼展現的元素

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

4、參數說明：

Attribute	Type	Default	Description
value	String	''	Your data string
size	Number	100	This is the height/width of your QR Code component
level	String	'L'	QR Correction level ('L', 'M', 'Q', 'H')
background	String	'white'	The color for the background
backgroundAlpha	Number	1.0	The opacity of the background
foreground	String	'black'	The color for the foreground
foregroundAlpha	Number	1.0	The opacity of the foreground
mime	String	'image/png'	The mime type for the output image
padding	Number	null	The padding around the QR Code
canvas	Boolean	false	Will output a canvas element if true

結束。

參考文檔：https://www.npmjs.com/package/angular2-qrcode