如何在Angular的TS文件中读取ngx-scanner-qrcode扫描到的二维码数据？

嘿，作为前端新手遇到这个问题很正常，我来一步步帮你搞定如何在TS文件里获取ngx-scanner-qrcode扫描到的二维码数据~

核心思路：通过事件绑定接收扫描结果 #

ngx-scanner-qrcode是通过事件回调来返回扫描数据的，不管是摄像头实时扫描还是上传图片扫描，都可以通过绑定官方提供的扫描成功事件，在TS里直接拿到数据。

具体实现步骤 #

1. 确保模块已正确引入（你应该已经做了，但还是提一下）

在你的组件所属的Module里，确保导入了NgxScannerQrcodeModule：

import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';

@NgModule({
  imports: [
    // ...其他模块
    NgxScannerQrcodeModule
  ]
})
export class YourModule { }

2. HTML页面绑定扫描成功事件

在你的组件HTML里，给ngx-scanner-qrcode标签绑定scanSuccess事件，同时如果需要上传图片扫描的功能，加上[upload]="true"属性：

<!-- 扫描组件，绑定扫描成功事件，开启上传功能 -->
<ngx-scanner-qrcode 
  (scanSuccess)="onScanSuccess($event)"
  [upload]="true"
></ngx-scanner-qrcode>

<!-- 可选：显示扫描结果，方便你验证 -->
<div *ngIf="scannedContent">扫描到的内容：{{ scannedContent }}</div>

3. 在TS文件中编写事件处理方法

在组件的TS文件里，定义一个变量存储扫描结果，然后编写onScanSuccess方法接收事件返回的数据：

import { Component } from '@angular/core';
// 导入扫描结果的类型，让代码更规范（可选但推荐）
import { ScannerQRCodeResult } from 'ngx-scanner-qrcode';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 用来存储扫描到的二维码数据
  scannedContent: string | null = null;

  // 处理扫描成功的回调方法
  onScanSuccess(result: ScannerQRCodeResult) {
    // 从返回的结果对象中取出二维码的内容
    this.scannedContent = result.data;
    console.log('扫描到的二维码数据：', this.scannedContent);
    
    // 在这里你可以做任何你需要的操作，比如：
    // - 把数据提交到后端接口
    // - 解析数据展示到页面其他区域
    // - 触发其他业务逻辑
  }
}

关于你提到的「文件上传后拿不到数据」的问题 #

其实ngx-scanner-qrcode已经封装了文件上传扫描的逻辑，当你开启[upload]="true"后，选择图片完成扫描时，scanSuccess事件同样会触发，你不需要自己去处理文件上传的res，直接在这个回调里拿result.data就可以了~

额外注意事项 #

• 摄像头扫描需要用户授权，所以要在HTTPS环境或者localhost本地环境下测试，否则浏览器会拒绝摄像头权限请求。
• 如果安装依赖时遇到版本问题，可以检查一下你的Angular版本和ngx-scanner-qrcode的版本兼容性（官方文档有说明）。

内容的提问来源于stack exchange，提问作者Wise17