在Angular 4中实现条形码扫描仪_Angular_Typescript_Barcode Scanner

在Angular 4中实现条形码扫描仪

angular typescript

在Angular 4中实现条形码扫描仪,angular,typescript,barcode-scanner,Angular,Typescript,Barcode Scanner,我正在尝试使用Angular 4实现一个条形码扫描仪，使用这个插件- 在我的scanner.component.ts页面中，我有 import { Component, OnInit} from '@angular/core'; import 'angular-barcode-scanner'; ... 在我的app.module.ts文件中 .... import { BarcodeScanner} from 'angular-barcode-scanner';

我正在尝试使用Angular 4实现一个条形码扫描仪，使用这个插件-

在我的

scanner.component.ts

页面中，我有

    import { Component, OnInit} from '@angular/core';
    import 'angular-barcode-scanner';
...

在我的

app.module.ts

文件中

  ....
import { BarcodeScanner} from 'angular-barcode-scanner';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(routes),
        LoginModule,
        SignupModule,
        DashboardModule,
        ReactiveFormsModule,
        BarcodeScanner
      ],
      providers: [
        DataService,
        TokenService
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

<barcode-scanner separator-char="separatorChar" trigger-char="triggerChar" scan-callback="scanCallback"
                trigger-callback="triggerCallback"></barcode-scanner>
        </div>
    </div>

然后在我的

scanner.component.html

文件中

  ....
import { BarcodeScanner} from 'angular-barcode-scanner';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(routes),
        LoginModule,
        SignupModule,
        DashboardModule,
        ReactiveFormsModule,
        BarcodeScanner
      ],
      providers: [
        DataService,
        TokenService
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

<barcode-scanner separator-char="separatorChar" trigger-char="triggerChar" scan-callback="scanCallback"
                trigger-callback="triggerCallback"></barcode-scanner>
        </div>
    </div>

但是，我在控制台中遇到以下错误

Uncaught ReferenceError: angular is not defined
    at Object.defineProperty.value (angular-barcode-scanner.js:1)
    at r (angular-barcode-scanner.js:1)
    at Object.defineProperty.value (angular-barcode-scanner.js:1)
    at angular-barcode-scanner.js:1
    at t (angular-barcode-scanner.js:1)
    at Object.<anonymous> (angular-barcode-scanner.js:1)
    at __webpack_require__ (bootstrap 0689b0e…:52)
    at Object.152 (bsElement.routes.ts:9)
    at __webpack_require__ (bootstrap 0689b0e…:52)
    at Object.413 (chart.module.ts:12)
    at __webpack_require__ (bootstrap 0689b0e…:52)
    at Object.153 (chart.component.ts:11)
    at __webpack_require__ (bootstrap 0689b0e…:52)
    at Object.155 (dashboard.component.ts:12)
    at __webpack_require__ (bootstrap 0689b0e…:52)
Object.defineProperty.value @ angular-barcode-scanner.js:1
r @ angular-barcode-scanner.js:1
Object.defineProperty.value @ angular-barcode-scanner.js:1
(anonymous) @ angular-barcode-scanner.js:1
t @ angular-barcode-scanner.js:1
(anonymous) @ angular-barcode-scanner.js:1
__webpack_require__ @ bootstrap 0689b0e…:52
152 @ bsElement.routes.ts:9
__webpack_require__ @ bootstrap 0689b0e…:52
413 @ chart.module.ts:12
__webpack_require__ @ bootstrap 0689b0e…:52
153 @ chart.component.ts:11
__webpack_require__ @ bootstrap 0689b0e…:52
155 @ dashboard.component.ts:12
__webpack_require__ @ bootstrap 0689b0e…:52
405 @ app.module.ts:40
__webpack_require__ @ bootstrap 0689b0e…:52
404 @ main.ts:12
__webpack_require__ @ bootstrap 0689b0e…:52
424 @ table.module.ts:12
__webpack_require__ @ bootstrap 0689b0e…:52
393 @ src async:7
__webpack_require__ @ bootstrap 0689b0e…:52
733 @ main.bundle.js:2545
__webpack_require__ @ bootstrap 0689b0e…:52
webpackJsonpCallback @ bootstrap 0689b0e…:23
(anonymous) @ main.bundle.js:1
bundle.js:19 Uncaught ReferenceError: ng is not defined
    at N (bundle.js:19)
    at VueComponent.ready (bundle.js:15)
    at VueComponent.LN.M._callHook (bundle.js:5)
    at VueComponent.z (bundle.js:5)
    at VueComponent.N (bundle.js:5)
    at VueComponent.M.$emit (bundle.js:5)
    at VueComponent.LN.M._callHook (bundle.js:5)
    at z (bundle.js:5)
    at VueComponent.M.$before (bundle.js:5)
    at CN.transition (bundle.js:6)
    at CN.mountComponent (bundle.js:6)
    at bundle.js:6
    at bundle.js:6
    at N (bundle.js:4)
    at ON.QN.M._resolveComponent (bundle.js:5)
N @ bundle.js:19
ready @ bundle.js:15
LN.M._callHook @ bundle.js:5
z @ bundle.js:5
N @ bundle.js:5
M.$emit @ bundle.js:5
LN.M._callHook @ bundle.js:5
z @ bundle.js:5
M.$before @ bundle.js:5
transition @ bundle.js:6
mountComponent @ bundle.js:6
(anonymous) @ bundle.js:6
(anonymous) @ bundle.js:6
N @ bundle.js:4
QN.M._resolveComponent @ bundle.js:5
resolveComponent @ bundle.js:6
setComponent @ bundle.js:6
bind @ bundle.js:6
CN._bind @ bundle.js:6
Gz @ bundle.js:4
(anonymous) @ bundle.js:4
M._compile @ bundle.js:5
M.$mount @ bundle.js:5
M._init @ bundle.js:4
Y.M._init @ bundle.js:19
ON @ bundle.js:5
(anonymous) @ bundle.js:3
zone.js:155 Uncaught TypeError: Cannot read property 'geAdapter' of undefined
    at WebSocket._ws.onopen (eval at M.exports (bundle.js:3), <anonymous>:97:46)
    at WebSocket.wrapFn [as _onopen] (zone.js:851)
    at ZoneDelegate.invokeTask (zone.js:262)
    at Zone.runTask (zone.js:151)
    at WebSocket.ZoneTask.invoke (zone.js:332)
_ws.onopen @ VM53541:97
wrapFn @ zone.js:851
ZoneDelegate.invokeTask @ zone.js:262
Zone.runTask @ zone.js:151
ZoneTask.invoke @ zone.js:332

未捕获引用错误：未定义角度
at Object.defineProperty.value（angular barcode scanner.js:1）
at r（角度条形码扫描仪.js:1）
at Object.defineProperty.value（angular barcode scanner.js:1）
在angular barcode scanner.js:1
at t（角度条形码扫描仪.js:1）
反对。（angular barcode scanner.js:1）
在网页上需要（引导0689b0e…：52）
at Object.152（bsElement.routes.ts:9）
在网页上需要（引导0689b0e…：52）
at Object.413（图表模块ts:12）
在网页上需要（引导0689b0e…：52）
at Object.153（图表组件ts:11）
在网页上需要（引导0689b0e…：52）
at Object.155（dashboard.component.ts:12）
在网页上需要（引导0689b0e…：52）
Object.defineProperty.value@angular barcode scanner.js:1
r@angular条码扫描器.js:1
Object.defineProperty.value@angular barcode scanner.js:1
(匿名)@angular barcode scanner.js:1
t@angular条码扫描器.js:1
(匿名)@angular barcode scanner.js:1
__webpack_require_uu@bootstrap 0689b0e…：52
152@bsElement.routes.ts:9
__webpack_require_uu@bootstrap 0689b0e…：52
413@图表模块ts:12
__webpack_require_uu@bootstrap 0689b0e…：52
153@图表。组件。ts:11
__webpack_require_uu@bootstrap 0689b0e…：52
155@仪表板。组件。ts:12
__webpack_require_uu@bootstrap 0689b0e…：52
405@app.module.ts:40
__webpack_require_uu@bootstrap 0689b0e…：52
404@main.ts:12
__webpack_require_uu@bootstrap 0689b0e…：52
424@表模块ts:12
__webpack_require_uu@bootstrap 0689b0e…：52
393@src async:7
__webpack_require_uu@bootstrap 0689b0e…：52
733@main.bundle.js:2545
__webpack_require_uu@bootstrap 0689b0e…：52
webpackJsonpCallback@bootstrap 0689b0e…：23
（匿名）@main.bundle.js:1
bundle.js:19未捕获引用错误：未定义ng
在N（bundle.js:19）
位于VueComponent.ready（bundle.js:15）
在VueComponent.LN.M._callHook（bundle.js:5）
在VueComponent.z（bundle.js:5）
位于VueComponent.N（bundle.js:5）
位于VueComponent.M.$emit（bundle.js:5）
在VueComponent.LN.M._callHook（bundle.js:5）
在z处（bundle.js:5）
在VueComponent.M.$之前（bundle.js:5）
在CN.transition（bundle.js:6）
在CN.mountComponent（bundle.js:6）
在bundle.js:6
在bundle.js:6
在N处（bundle.js:4）
at ON.QN.M._解析组件（bundle.js:5）
N@bundle.js:19
ready@bundle.js:15
LN.M._callHook@bundle.js:5
z@bundle.js:5
N@bundle.js:5
M.$emit@bundle.js:5
LN.M._callHook@bundle.js:5
z@bundle.js:5
M.@bundle.js:5之前的$
transition@bundle.js:6
mountComponent@bundle.js:6
（匿名）@bundle.js:6
（匿名）@bundle.js:6
N@bundle.js:4
QN.M._resolveComponent@bundle.js:5
resolveComponent@bundle.js:6
setComponent@bundle.js:6
bind@bundle.js:6
CN._bind@bundle.js:6
Gz@bundle.js:4
（匿名）@bundle.js:4
M._compile@bundle.js:5
M.$mount@bundle.js:5
M._init@bundle.js:4
Y.M._init@bundle.js:19
关于@bundle.js:5
（匿名）@bundle.js:3
zone.js:155未捕获类型错误：无法读取未定义的属性“geAdapter”
在WebSocket.\u ws.onopen（在M.exports（bundle.js:3），：97:46进行评估）
在WebSocket.wrapFn[as _onopen]（zone.js:851）
在ZoneDelegate.invokeTask（zone.js:262）
在Zone.runTask（Zone.js:151）
在WebSocket.ZoneTask.invoke（zone.js:332）
_ws.onopen@VM53541:97
wrapFn@zone.js:851
ZoneDelegate.invokeTask@zone.js:262
Zone.runTask@Zone.js:151
ZoneTask.invoke@zone.js:332

感谢您的帮助。

是AngularJS（V1）应用程序，您似乎正在构建AngularJS（V4可能是？）应用程序。我认为你做不到像那样使用

。

是一个AngularJS（V1）应用程序，您似乎正在构建AngularJS（V4可能是？）应用程序。我认为你做不到使用

就像那样。

是一款完全用JavaScript编写的条形码扫描仪，支持实时定位和解码各种类型的条形码，如

EAN、code 128、code 39、EAN 8、UPC-a、UPC-C、I2of5、2of5、code 93和CODABAR

。该库还能够使用getUserMedia直接访问用户的相机流。虽然条形码需要大量的图像处理，但即使是最新的智能手机也能够实时定位和解码条形码

使用QuaggaJS，用于条形码扫描仪

用于角度条形码扫描仪的NPM角度模块：

从'@angular/core'导入{ChangeDetectorRef，Component，OnInit}；
从“嘎嘎”进口嘎嘎；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
条形码=''；
条形码结果；
configQuagga={
输入流：{
姓名：'现场'，
键入：“LiveStream”，
目标：“#输入条形码”，
限制条件：{
宽度：{min:640}，
高度：{min:480}，
aspectRatio:{min:1，max:100}，
facingMode:'环境'，//或用户
},
单通道：false//true：仅读取红色通道
},
定位器：{
补丁大小：“中等”，
半样本：正确
},
地点：对，
Numof工人：4，
解码器：{
读卡器：['code\u 128\u reader']
}
};
构造函数（私有引用：ChangeDetectorRef）{}
恩戈尼尼特（）{
console.log（'Barcode:initialization'）；
}
testChangeValues（）{
this.barcode='Code barres bidon:0123456789'；
}
startScanner（）{
这个。条形码=“”；
此.ref.detectChanges（）；
Quagga.onProcessed（（结果）=>this.onProcessed（结果））；
Quagga.onDetected（（结果）=>this.logCode（结果））；
嘎嘎