angular - 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

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

首先，安装 Instascan NPM 包：

npm i instascan

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

import Instascan from 'instascan';
...

您的其余代码将起作用。

Answer 2

这是一个简单的javascript库。如果要在组件中使用，则需要declare在Import. 像这样 ...

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

declare var Instascan: any;

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

declare var $: any;