Question

我的angularCLI版本如下

Angular CLI: 6.2.9
Node: 8.9.1
OS: win32 x64

此Link没有有关如何使用该功能的正确文档。有人可以帮忙提供此软件包中的任何示例示例吗？此外，文档中提供的StackBlitz无法正常工作。

Answer 1

通过NPM或Yarn安装@zxing/ngx-scanner，我假设您知道该怎么做。
将ZXingScannerModule添加到您的AppModule（或您要使用的任何其他位置）中：

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

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

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

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

  qrResultString: string;

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

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

你明白了。

这是使用1.7.2版编写的更简单的方法。看一下this StackBlitz demo（请忽略Material组件，不需要它们）。

Answer 2

检查 Wiki 和这个 blog

安装以下软件包

npm i @zxing/browser@latest --save
npm i @zxing/library@latest --save
npm i @zxing/ngx-scanner@latest --save

在 app.module 中添加 import 语句

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

在组件 html 中添加 zxing-scanner 元素

<zxing-scanner></zxing-scanner>

@ zxing / ngx-scanner-是否有使用此软件包扫描条形码的简化方法？

2 个答案: