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

Question

我的angularCLI版本如下

Angular CLI: 6.2.9
Node: 8.9.1
OS: win32 x64

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

Answer 1

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 { }

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版编写。看一下this StackBlitz demo（请忽略“材料”组件，不需要它们）。