- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我一直在使用这个article通过 Angular CLI 将 Dropzone.js 导入到我的 Angular 2 项目中。虽然这篇文章是在这个问题之前 2 个多月前发布的,但我注意到这个人没有使用带有 @NgModule 的新 Angular CLI 语法。
有什么办法可以导入这个Dropzone.js npm module进入我的项目?
我已成功将 Dropzone.js 文件包含到 angular-cli.json 中的“scripts”属性中:
"scripts": [
"../node_modules/dropzone/dist/dropzone.js"
],
这是我的拖放区组件:
import {
Component,
OnInit,
Input,
Output,
EventEmitter,
ElementRef
} from '@angular/core';
import {
Http
} from '@angular/http';
@Component({
selector: 'dropzone',
templateUrl: './dropzone.component.html',
styleUrls: ['./dropzone.component.scss']
})
export class DropzoneComponent implements OnInit {
private _dropzone: Dropzone;
@Input()
element: string = ".dropzoneArea";
@Input()
url: string = "file/post";
@Input()
uploadMultiple: boolean = false;
@Input()
maxFileSize: number = 2048;
@Input()
clickable: string = ".dropzoneArea";
@Input()
autoProcessQueue: boolean = true;
@Input()
addRemoveLinks: boolean = false;
@Input()
createImageThumbnails: boolean = false;
@Input()
previewTemplate: string = "<div style='display:none'></div>";
@Input()
acceptedFiles: string = "*";
@Output()
sending: EventEmitter < boolean > ;
@Output()
uploadprogress: EventEmitter < number > ;
@Output()
success: EventEmitter < any > ;
@Output()
error: EventEmitter < any > ;
constructor(private _eleRef: ElementRef, private _http: Http) {
this.sending = new EventEmitter < boolean > ();
this.uploadprogress = new EventEmitter < number > ();
this.success = new EventEmitter < any > ();
this.error = new EventEmitter < any > ();
}
initDropzone() {
this._http.get("api/getCsrf").subscribe(data => {
let body = data.json();
this._dropzone = new Dropzone(this.element, {
url: this.url,
uploadMultiple: this.uploadMultiple,
maxFilesize: this.maxFileSize,
clickable: this.clickable,
autoProcessQueue: this.autoProcessQueue,
addRemoveLinks: this.addRemoveLinks,
createImageThumbnails: this.createImageThumbnails,
previewTemplate: this.previewTemplate,
acceptedFiles: this.acceptedFiles,
params: {
_csrf: body._csrf
}
});
this._dropzone.on("sending", (file, xhr, formaData) => {
this.sending.emit(true);
});
this._dropzone.on("uploadprogress", (file, progress, bytesSent) => {
this.uploadprogress.emit(progress);
});
this._dropzone.on("success", (file) => {
this.success.emit(file);
});
this._dropzone.on("error", (file, message) => {
this.error.emit(message);
});
});
}
ngOnInit() {
this.initDropzone();
}
}
这是我加载应用程序时遇到的错误
client?93b6:76 [default] /projects/project/dropzone/dropzone.component.ts:79:33
Cannot find name 'Dropzone'.
大家对此有什么想法吗?我实际上可以访问 Dropzone 对象,因为它附加到窗口,但我无法让我的组件找到它。
最佳答案
TypeScript 对 JS 文件一无所知,所以如果你有一些全局的东西,你仍然需要以一种或另一种方式告诉 TypeScipt。最简单的方法是声明一个任意变量
declare var Dropzone: any
这足以编译代码,因为 TypeScript 只是寻找名称 Dropzone
。因为我们将其输入到any
。它并不真正关心我们之后如何处理该符号。它只是接受我们知道我们正在用它做什么。
当将 JS 库与 TypeScript 一起使用时,更推荐使用 TypeScript 定义文件。如果库不支持开箱即用的 TypeScript(库中没有包含自己的定义文件),对于流行的库,很可能已经有一个定义文件。Dropzone 是那些流行的库之一。
npm install --save-dev @types/dropzone
现在您可以将其导入到任何需要的地方
import Dropzone from 'dropzone'
现在您应该获得强大的打字和智能感知能力。请注意,对于我来说,使用 VSCode,我必须重新启动 IDE 才能启动智能感知。这不应该是必需的,它可能是 VSCode 的错误。
关于angular - 将外部 JS 库导入到 Angular 2 CLI @NgModule,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40098443/
如何指示 webpack 排除所有 d3 模块? // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
这是一个简单的循环,我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
问题+概述 下面是两个片段,其中包含最初隐藏的 div,然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
我有一个 HTML 页面和一个单独的 .js 文件,该文件包含在带有 的页面中标签。 这是我的 .js 文件: element = document.getElementById("test");
我在 linux 静态库项目中有 3 个文件,我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
我正在尝试将颜色背景更改为默认背景颜色,当我点击输入框外 我尝试使用“null”或“none”但没有用? window.addEventListener('click', outsideClick);
我正在编写一个应用程序,要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
在 android 中,不可移动(内部)的外部存储和内部存储有什么区别?我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据 谢谢 最佳答案 在许多较新的设备中,将不再有物理区别,
在 C++ 中,假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别? 实现A namespace Ada { extern "C" { int getN
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。 想象一下我们有这样的东西: Hello World 如果我们这样
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
我们正在使用 SVN 试水,并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块 模块一 模块二 模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务? 我在裸机上运行 Kubernetes。 谢谢 最佳答案 使用 nodePort 类型的服务,它会将您的服务绑定(bind)到所有节
是否有可能在 Controller 之外使用 generateUrl() 方法? 我尝试在带有 $this->get('router') 的自定义存储库类中使用它,但它没有用。 更新 我在这里找到了一
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止,我已经为 React 和其他小库实现了这一目标。 如果我只是移动 '@angular/compil
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项,或者得到了: 您不能更改处于未解析状态的
我是R包的创建者EnvStats . 有一个我经常使用的函数,叫做 stripChart .我刚开始学习ggplot2 ,并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack
我是一名优秀的程序员,十分优秀!