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

Question

我的 angularCLI 版本如下

Angular CLI: 6.2.9
Node: 8.9.1
OS: win32 x64

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

Answer 1

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

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

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

@NgModule({
  imports: [
    ZXingScannerModule,
  ],
  declarations: [AppComponent /*, other components */],
  bootstrap: [AppComponent],
})
export class AppModule { }

3. 将组件添加到您的模板代码中并设置属性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>

4. 准备组件的 TS 代码以接收数据并显示它：

  qrResultString: string;

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

  onCodeResult(resultString: string) {
    this.qrResultString = resultString;
  }

5. 你说对了。

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