角度6 Instascan库面临的问题

Question

我已将instascan库导入到Index.html文件中，

<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

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

首先，安装Instascan NPM软件包：

npm i instascan

然后将其导入组件中：

import Instascan from 'instascan';
...

剩下的代码会正常工作的。

Answer 2

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

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

declare var Instascan: any;

如果这个javascript库使用jQuatry，那么您也可以使用declare $

declare var $: any;