Блог

Главная - Вопросы по программированию - «zxing-сканер» не является известным элементом: 1. Если «zxing-сканер» является угловым компонентом, убедитесь, что он является частью этого модуля

«zxing-сканер» не является известным элементом: 1. Если «zxing-сканер» является угловым компонентом, убедитесь, что он является частью этого модуля

#angular #zxing

Вопрос:

Я пытаюсь включить сканер zxing в свое приложение angular, и, следуя онлайн-руководствам, он выдает следующую ошибку, которую я, похоже, не могу решить,

«zxing-сканер» не является известным элементом:

  1. Если «zxing-сканер» является угловым компонентом, убедитесь, что он является частью этого модуля.
  2. Если «zxing-сканер» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@NgModule.schemas » этого компонента, чтобы подавить это сообщение.

Мои файлы находятся:

qr-сканер-страница.ts

 import { Component, VERSION, OnInit, ViewChild } from '@angular/core';
import { ZXingScannerComponent } from '@zxing/ngx-scanner';
import { Result } from '@zxing/library';

@Component({
selector: 'app-qr-scanner',
templateUrl: './qr-scanner.page.html',
styleUrls: ['./qr-scanner.page.scss'],
})
export class QrScannerPage implements OnInit {

ngVersion = VERSION.full;

@ViewChild('scanner')
scanner: ZXingScannerComponent;

hasDevices: boolean;
hasPermission: boolean;
qrResultString: string;
qrResult: Resu<

availableDevices: MediaDeviceInfo[];
currentDevice: MediaDeviceInfo;

constructor() { }

ngOnInit(): void {

this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
  this.hasDevices = true;
  this.availableDevices = devices;

  // selects the devices's back camera by default
  for (const device of devices) {
      if (/back|rear|environment/gi.test(device.label)) {
          this.scanner.changedevice(device);
          this.currentDevice = device;
          break;
      }
  }
 });

this.scanner.camerasNotFound.subscribe(() => this.hasDevices = false);
this.scanner.scanComplete.subscribe((result: Result) => this.qrResult = result);
this.scanner.permissionResponse.subscribe((perm: boolean) => this.hasPermission = perm);
}

handleQrCodeResult(resultString: string) {
console.debug('Result: ', resultString);
const final_value = JSON.parse(resultString)
this.qrResultString = 'name: '   final_value.name   ' age: '   final_value.age;
}}

файл qr-сканера.module.ts является:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { QrScannerPageRoutingModule } from './qr-scanner-routing.module';
import { QrScannerPage } from './qr-scanner.page';
import { ZXingScannerModule } from '@zxing/ngx-scanner';
import { Result } from '@zxing/library';

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
QrScannerPageRoutingModule,
ZXingScannerModule
],
declarations: [QrScannerPage]
})
export class QrScannerPageModule {}

the qr-scanner.html file is:

 <ion-header>
<ion-toolbar>
<ion-title>QR-Scanner</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="scanner-shell" [hidden]="!hasDevices">


 <zxing-scanner #scanner start="true" [device]="currentDevice"   
(scanSuccess)="handleQrCodeResult($event)" [formats]="['QR_CODE']"></zxing-scanner>

<section class="results" *ngIf="qrResultString">
  <small>Result</small>
  <strong>{{ qrResultString}}</strong>
</section>
</div>
</ion-content>

любые предложения были бы чрезвычайно признательны, я немного застрял! Большое спасибо

Метки: , ,