时间戳

首页 > 解决方案 > @zxing/ngx-scanner - 有没有简化的方法来使用这个包来扫描条形码？

angular - @zxing/ngx-scanner - 有没有简化的方法来使用这个包来扫描条形码？

问题描述

我的 angularCLI 版本如下

Angular CLI: 6.2.9
Node: 8.9.1
OS: win32 x64

此 链接没有关于如何使用该功能的适当文档。任何人都可以帮助这个包中的任何示例示例吗？文档中提供的 StackBlitz 也不起作用。

标签： angularbarcodezxing

解决方案

  1. 通过 NPM 或 Yarn安装@zxing/ngx-scanner，我想你知道怎么做。

  2. 添加ZXingScannerModule到您的AppModule（或任何其他您想使用它的地方）：

import { ZXingScannerModule } from '@zxing/ngx-scanner';

@NgModule({
  imports: [
    ZXingScannerModule,
  ],
  declarations: [AppComponent /*, other components */],
  bootstrap: [AppComponent],
})
export class AppModule { }
  1. 将组件添加到您的模板代码并设置属性scanSuccess以接收成功的解码结果：
<zxing-scanner (scanSuccess)="onCodeResult($event)"></zxing-scanner>

<section class="results" *ngIf="qrResultString">
  <div>
    <small>Result</small>
    <strong>{{ qrResultString }}</strong>
  </div>
  <button mat-icon-button (click)="clearResult()">&times;</button>
</section>
  1. 准备组件的 TS 代码以接收数据并显示它：
  qrResultString: string;

  clearResult(): void {
    this.qrResultString = null;
  }

  onCodeResult(resultString: string) {
    this.qrResultString = resultString;
  }
  1. 你说对了。

这是使用它的更简单的方法，使用版本 1.7.2 编写。看看这个 StackBlitz 演示（请忽略 Material 组件，它们不是必需的）。

推荐阅读