Angular 6 Instascan 图书馆面临问题

Question

我已经在 Index.html 文件中导入了 instascan 库，

<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"> </script>

我的 app.component.html 中有如下代码，

<video id="preview"></video>

我的 app.component.ts 中有如下代码，

let scanner = new Instascan.Scanner({                                                           
 video: document.getElementById('preview'),                                                    
 mirror: false,
 facingMode: { exact: 'environment' }});

 Instascan.Camera.getCameras().then(cameras => {
    if (cameras.length > 0) {
        this.scanner.start(cameras[1]);
    } else {
        alert("Camera Permission denied");
        window.location.reload();
    }
}).catch(error => {
    console.log(error);
    window.location.reload();
})

在 Instascan 中遇到问题，编译时出现如下错误， 找不到名字 'Instascan'.

Answer 1

这是一个简单的 javascript 库。如果你想在组件中使用，那么你需要 declare 在 Import 之后。像这样...

import { Component, OnInit} from '@angular/core';

declare var Instascan: any;

如果这个 javascript 库使用 jQuatry 那么你 declare $

declare var $: any;

Answer 2

考虑使用 import 语法而不是使用 link 标记。

首先，安装 Instascan NPM 包：

npm i instascan

然后将其导入到您的组件中：

import Instascan from 'instascan';
...

您的其余代码将起作用。

Angular 6 Instascan 图书馆面临问题

Facing issue at Instascan Library in Angular 6

angular

angular9

instascan