首先

在Angular7中，将QR码绘制在屏幕上。

环境

• angular 7

etc…

使用包装

angular2-qrcode 是一个位于 Github 上的开源项目，链接为 https://github.com/SuperiorJT/angular2-qrcode。

操作步骤

准备工作

我使用 Angular CLI 创建了一个项目，因为我使用的是 WebStorm，所以我选择了菜单中的 NewProject – Angular CLI 选项来创建项目。

引入 angular2-qrcode

基本上按照Readme.md中的指示进行操作。
https://github.com/SuperiorJT/angular2-qrcode

npm install angular2-qrcode

另一个话题是，最近不再需要写–save了。据说Package.json会自动更新。
https://qiita.com/glhfdev/items/c5beda8572aa8c1e6be6

出现了错误！

所以，当执行上述命令时，会出现安装错误的提示。

./util/has_lib.sh: line 31: pkg-config: command not found
gyp: Call to './util/has_lib.sh freetype' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
gyp ERR! System Darwin 16.7.0
以下略

这也可以在Readme.md中以以下方式表达

请随意忽略它。

因为上面写着请忽略，所以我会忽略它。

添加到模块中

在app.module.ts中添加之前追加的包模块。
（这些步骤都是固定的吧）

import {QRCodeModule} from 'angular2-qrcode'; // <-- 追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeModule   // <-- 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

暂时试着显示一下

在HTML模板中添加标签

这也是按照Readme.md的指示…

<div>
  <qr-code [value]="'Hello QR code!!'" [size]="150"></qr-code>
</div>

完成了！

将图像输出到画布上。

通过在选项中指定canvas=”true”，可以将其绘制在画布上。

<div>
  <qr-code [value]="'Hello QR code!!'" [size]="150" canvas="true"></qr-code>
</div>

最终

最近QR码变得越来越常见，可以非常简单地生成。当您需要在手机支付等方面使用QR码时，可以试试这个应用。