Angular4 + QRCode生成器组件

Angular4 + QRCode生成器组件
插件名称 qrcode
发布时间 2020年6月2日
插件作者 Cordobo

这是一个基于qrcodejs的具有AOT支持的QR代码(快速响应)的Angular 4/5 QR代码生成器组件。

安装:

# Yarn
$ yarn add angularx-qrcode

# NPM
$ npm install angularx-qrcode --save

基本用法

导入模块并将其添加到主AppModule中的imports部分中(文件:app.module.ts)

// 导入所有的
import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

从字符串生成QR码(仅适用于指令)

现在,我们的Angular / Ionic应用程序了解了我们新的QR Code模块,我们可以使用指令在模板中调用它了。如果使用简单的文本字符串,则在控制器类中不需要其他代码:

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>

从控制器类中的变量创建QR码

除了我们的 上面的example.html中的-directive,我们向控制器example.ts添加了两行新代码。

export class QRCodeComponent {
    public angularxQrCode: string = null;
    constructor () {
        // assign a value
        this.myAngularxQrCode = 'Your QR code data string';
    }
}