javascript - 在 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);
    } 
}

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

Property 'inlineEdit' does not exist on type 'JQuery'

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

Answer 1

您可以使用<any>像这样的类型转换:

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

<小时/>

或者更好:

首次安装@types/jquery来自npm

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