$(...).Jcrop 不是函数。在 Angular 2 中使用

Question

我将 jcrop 与 angular 2 一起使用，但出现错误。

added into index.html

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.js"></script>

问题

component

 onSelect(media: Media): void {
        this.isSelecting = true;
        this.mediaFile = media;
        jQuery(this.element).ready(function ($: JQueryStatic): void {
            $('#target').Jcrop({
                aspectRatio: 1,
                setSelect: [175, 100, 400, 300]
            }, function (): void {
                const jcrop_api = this;
                const thumbnail = this.initComponent('Thumbnailer', {width: 130, height: 130});
            });
        });
    }

Html

  <img src="{{mediaFile.url}}" id="target" class="max-width-500">

Answer 1

我得到了这样的解决方案，我发帖在这里寻求帮助

需要在组件中声明

 declare var $: JQueryStatic;

需要创建接口

interface JQuery {
  container: JQuery;
  Jcrop(...options: any[]): JQuery;
}

Jcrop 的方法

 private _initJCrop(): void {
        const componentInstance = this;
        this.jCrop = $('#crop-image').Jcrop(this.defaultJCropConfig, function(): void {
            componentInstance.jCropApi = this;
            componentInstance.jCropApi.container.on('cropmove', function(e: any, s: any, c: any): void {
                currentSelection = c;
                componentInstance._updateSelection(currentSelection);
            });
        });
        this.selectionX = 0;
        this.selectionY = 0;
        this.selectionWidth = this.minWidth;
        this.selectionHeight = this.minHeight;
        let currentSelection = {
            x: this.selectionX,
            y: this.selectionY,
            h: this.selectionHeight,
            w: this.selectionWidth
        };
    }

    private _updateSelection(currentSelection: any): void {
        this.selectionX = parseInt(currentSelection.x, 10);
        this.selectionY = parseInt(currentSelection.y, 10);
        this.selectionWidth = parseInt(currentSelection.w, 10);
        this.selectionHeight = parseInt(currentSelection.h, 10);
    }

    onCrop(): void {
        this.dialogRef.close({
            x: this.selectionX,
            y: this.selectionY,
            h: this.selectionHeight,
            w: this.selectionWidth
        });
    }

$(...).Jcrop 不是函数。在 Angular 2 中使用

$(...).Jcrop is not a function. using in Angular 2

jquery

jquery-plugins

angular