在角4分量中使用Dropify文件输入

Question

我想在我的Range4项目中使用Dropify组件。但是，在将.dropify类应用到input之后，我得到的只是默认的文件输入，其中有“选择文件”按钮和文件名标签。如何显示Dropify拖放文件输入？

根据Dropify的要求，我在它们各自的位置中包含了JQuery和Dropify的脚本、样式表和字体：

• jquery.min.js包含在.angular-cli.json的apps.scripts数组中
• dropify.min.js包含在.angular-cli.json的apps.scripts数组中
• dropify.css包含在.angular-cli.json的apps.styles数组中
• Roboto字体(Dropify所需)@import在src/styles.css中编辑

src/app/app.component.html

...
<div style="padding-bottom: 1.25em;">
  <input type="file" id="input" class="dropify" data-allowed-file-extensions="csv" formControlName="studentList" required>
</div>
...

src/app/app.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ...
  ngOnInit() {
    ...
    const dragAndDrop = $('.dropify').dropify({
      messages: {
        'default': 'Drag and drop a CSV file here or click'
      }
    });
    ...
  }
  ...
}

src/styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~http://fonts.googleapis.com/css?family=Roboto:400,300,700,900|Roboto+Condensed:400,300,700";

.angular-cli.json

{
  ...
  "apps": {
    ...
    "styles": [
      "styles.css",
      "../node_modules/dropify/dist/css/dropify.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/dropify/dist/js/dropify.min.js"
    ],
    ...
  }
  ...
}

Answer 1

没有任何错误，就不可能给出任何解决方案。但是我在这里给出一个用例。可能对你有帮助。

1. npm install dropify --save
2. 将.js和.css文件添加到.ange-cli.json或索引文件中。
3. <input type="file" (change)="imageChanged($event)" class="dropify" accept=".png, .jpg, .jpeg" data-allowed-file-extensions="jpg png jpeg" data-max-file-size="300K">输入元素
4. 在.ts文件declare var $: any;中
5. ngOnInit() { $('.dropify').dropify({}); }

就是这样。

Answer 2

我在JQuery 4中遇到了类似的问题，通过在app.component.ts中添加另一个声明来解决这个问题：

declare var jquery:any;希望它能起作用！