QuaggaJS与Angular 2问题 [英] QuaggaJS with Angular 2 problems

问题描述

我正在尝试将Angular 2与QuaggaJS一起使用.我在app文件夹中有quagga.d.ts文件，在组件中有以下导入语句:

I'm trying to use QuaggaJS with Angular 2. I have the quagga.d.ts file in the app folder and the following import statements in the component:

import Quagga from './quagga.d';

该指南从"quagga"说起，但它不起作用，但上述方法都有效

The guide says from 'quagga' but it doesn't work but above works

declare const Quagga = require('quagga').default;

我在组件的构造函数中有以下代码，如下所示:

I have the following code in the constructor of the component like this:

constructor() { 

    Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream",
      target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function(err) {
      if (err) {
          console.log(err);
          return
      }
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });


 }

但是，出现以下错误:

Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'init' of undefined来自core.umd.js

Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'init' of undefined from core.umd.js

和

 Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'init' of undefined
TypeError: Cannot read property 'init' of undefined

来自zone.js

此错误是什么意思?我不知道这个！ zone.js是否存在错误?

What does this error mean? I can't figure this out! Is there a bug with zone.js?

任何帮助将不胜感激！

推荐答案

要将Quagga添加到node_modules run

To add Quagga to node_modules run

npm install quagga --save

像往常一样在index.html中

添加js和css依赖项 例如

add js and css dependencies in index.html as usual for example

<script src="node_modules/....../qugga.min.js"></script>

在app.component.ts

import { Component, OnInit } from '@angular/core';
declare var Quagga:any;
@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent implements OnInit {
  ngOnInit() {
      Quagga.init({
        inputStream : {
          name : "Live",
          type : "LiveStream",
          target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
        },
        decoder : {
          readers : ["code_128_reader"]
        }
      }, function(err) {
          if (err) {
              console.log(err);
              return
          }
          console.log("Initialization finished. Ready to start");
          Quagga.start();
      });
  }

}

使用ngOnInit代替构造函数.虽然构造函数仅实例化组件，但在加载组件后将调用ngOnInit.

Use ngOnInit instead of the constructor. While the constructor only instantiates the component, ngOnInit will be called after the component is loaded.

另外，看看 https://github.com/serratus/quaggaJS/issues/146 帮助您下一步所需.

Also, take a look at https://github.com/serratus/quaggaJS/issues/146 for some other help you would need in next step.

这篇关于QuaggaJS与Angular 2问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！