在Angular Component类中调用自定义jQuery函数

Question

我在Angular应用程序的源文件夹（即/src/assets/inlineedit.js）下的javascript文件中编写了一个自定义查询函数。

这是文件的内容。

$.fn.inlineEdit = function(replaceWith, connectWith) {
    $(this).hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });

    $(this).click(function() {
        var elem = $(this);
        elem.hide();
        elem.after(replaceWith);
        replaceWith.focus();
        replaceWith.blur(function() {
            if ($(this).val() != "") {
                connectWith.val($(this).val()).change();
                elem.text($(this).val());
            }
            $(this).remove();
            elem.show();
        });
    });
};

现在，我想在Angular mycomponent.ts文件中调用此函数，内容如下所示：

import { Component, ViewChild, ElementRef  } from '@angular/core';
@Component({
  selector: 'app-pivotgrid',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.css']
})
export class mycomponent {
    OnCellclick (event): void
    {
       var replaceWith = $('<input name="temp" type="text" />'),
            connectWith = $('input[name="hiddenField"]');

        $('#innerDiv').inlineEdit(replaceWith, connectWith);
    } 
}

但是，我遇到了类似的错误

类型“ JQuery”上不存在属性“ inlineEdit”

如何在Angular组件中调用jQuery函数？

Answer 1

您可以这样使用<any>类型转换：

(<any>$('#innerDiv')).inlineEdit(replaceWith, connectWith);

---

甚至更好：

首先从npm安装@types/jquery

npm install @types/jquery --save-dev

然后添加本地类型文件并在其中声明您的插件功能

interface JQuery {
  <your-plugin-name>(options?: any): any;
}

然后，您可以使用您的插件。

资料来源： https : //medium.com/all-is-web/angular-5-using-jquery-plugins-5edf4e642969