我尝试将QuaggaJS与Angular 2一起使用。我在app文件夹中有quagga.d.ts文件,组件中有以下import语句:
import Quagga from './quagga.d';
该指南说,来自' quagga'但它不起作用,但在工作之上
declare const Quagga = require('quagga').default;
我在组件的构造函数中有以下代码,如下所示:
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();
});
}
但是,我收到以下错误:
来自core.umd.js的 Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'init' of undefined
和
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有错误吗?
非常感谢任何帮助!
答案 0 :(得分:3)
将Quagga添加到node_modules
运行
npm install quagga --save
像往常一样在js
中添加css
和index.html
个依赖项
例如
<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
。
另外,看一看 https://github.com/serratus/quaggaJS/issues/146以获得下一步所需的其他帮助。