在Angular2应用程序中使用element-resize-detector库 [英] Use element-resize-detector library in an Angular2 application

问题描述

我正在尝试使用element-resize-detector库( https://github. com/wnr/element-resize-detector ).

I am trying to use the element-resize-detector library (https://github.com/wnr/element-resize-detector) in an Angular2 application.

根据我有限的JS模块知识，该库似乎是CommonJS格式的.经过几次尝试，我创建了以下定义文件(* .d.ts):

From my limited JS module knowledge, the library appears to be in CommonJS format. After several attempts, I have created the following definition file (*.d.ts):

declare module ResizeDetector {
  function ResizeDetector(options: any): ResizeDetector.Erd;

  interface Erd {
    listenTo(element: any, resizeCallback: any): void;
    uninstall(element: any): void;
  }
}
export = ResizeDetector;

然后我在TypeScript代码中使用以下import语句:

I then use the following import statement in my TypeScript code:

import * as ResizeDetector from 'element-resize-detector';

运行我的应用程序并使用console.log('ResizeDetector', ResizeDetector)时，将记录以下输出:

When running my app and using console.log('ResizeDetector', ResizeDetector), the following output is logged:

ResizeDetector function (options) {
    options = options || {};

    //idHandler is currently not an option to the listenTo function, so it should not be added to globalOptions.
    var idHandler;

    if (options.…

这向我显示该库已成功加载，并且返回了预期的功能.

This shows me that the library is successfully loaded and that it returns a function as expected.

我的问题是我现在如何开始在TypeScript中使用该库?当我尝试类似的事情时:

My question is how can I now start using the library in TypeScript? When I attempt something like:

private static resizeDetector = ResizeDetector({ strategy: 'scroll' });

我收到以下运输错误:

error TS2349: Cannot invoke an expression whose type lacks a call signature.

推荐答案

element-resize-detector.d.ts

declare function elementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd;

declare namespace elementResizeDetectorMaker {
    interface ErdmOptions {
        strategy?: 'scroll' | 'object';
    }

    interface Erd {
        listenTo(element: HTMLElement, callback: (elem: HTMLElement) => void);
        removeListener(element: HTMLElement, callback: (elem: HTMLElement) => void);
        removeAllListeners(element: HTMLElement);
        uninstall(element: HTMLElement);
    }
}

export = elementResizeDetectorMaker;

消费者

let resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll'});
resizeDetector.listenTo(document.getElementById('abc'), (elem: HTMLElement) => {
    console.log(elem.offsetWidth, elem.offsetHeight);
})

这篇关于在Angular2应用程序中使用element-resize-detector库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！