热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript–在Angular2应用程序中使用elementresizedetector库

我试图在Angular2应用程序中使用元素调整大小检测器库(https:github.comwnrelement-resize-detector).根据我有限的JS模块知识,该库似

我试图在Angular2应用程序中使用元素调整大小检测器库(https://github.com/wnr/element-resize-detector).

根据我有限的JS模块知识,该库似乎采用CommonJS格式.经过多次尝试,我创建了以下定义文件(* .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语句:

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

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

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.…

这告诉我库已成功加载并且它按预期返回一个函数.

我的问题是我现在如何开始在TypeScript中使用库?当我尝试这样的事情:

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

我得到以下转换错误:

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

解决方法:

元件调整大小-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);
})


推荐阅读
  • 本文详细介绍了如何在本地环境中安装配置Frida及其服务器组件,以及如何通过Frida进行基本的应用程序动态分析,包括获取应用版本和加载的类信息。 ... [详细]
  • CSS模块化命名 ... [详细]
  • 本文详细介绍了如何在ReactJS项目中集成Onsen-UI的ActionSheetButton组件,并通过具体示例展示了其使用方法及效果。 ... [详细]
  • 第1章选择流程控制语句1.1顺序结构的基本使用1.1.1顺序结构概述是程序中最简单最基本的流程控制,没有特定的语法结构,按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行 ... [详细]
  • 本文详细记录了一位求职者在搜狐进行的两次面试经历,包括面试的具体时间、面试流程、技术问题及个人感受。通过本次面试,作者不仅获得了宝贵的经验,还成功拿到了搜狐的录用通知。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 使用jQuery与百度地图API实现地址转经纬度功能
    本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度,包括申请API密钥、页面构建及核心代码实现。 ... [详细]
  • 深入解析JavaScript中的this关键字
    本文详细探讨了JavaScript中this关键字的具体指向及其在不同场景下的应用,通过实例和图表帮助读者更好地理解和掌握这一核心概念。 ... [详细]
  • 本文介绍了进程的基本概念及其在操作系统中的重要性,探讨了进程与程序的区别,以及如何通过多进程实现并发和并行。文章还详细讲解了Python中的multiprocessing模块,包括Process类的使用方法、进程间的同步与异步调用、阻塞与非阻塞操作,并通过实例演示了进程池的应用。 ... [详细]
  • 本文详细介绍了如何在 EasyUI 框架中实现 DataGrid 组件的分页功能,包括配置方法和常见问题的解决方案。 ... [详细]
  • 本文详细介绍了如何在Vue项目中集成和配置XGPlayer视频插件,包括安装步骤、基本配置以及常见问题的解决方法。 ... [详细]
  • 使用IntelliJ IDEA高效开发与运行Shell脚本
    本文介绍了如何利用IntelliJ IDEA中的BashSupport插件来增强Shell脚本的开发体验,包括插件的安装、配置以及脚本的运行方法。 ... [详细]
  • 本文将详细介绍如何配置并整合MVP架构、Retrofit网络请求库、Dagger2依赖注入框架以及RxAndroid响应式编程库,构建高效、模块化的Android应用。 ... [详细]
  • This article explores the process of integrating Promises into Ext Ajax calls for a more functional programming approach, along with detailed steps on testing these asynchronous operations. ... [详细]
  • Web开发实践:创建连连看小游戏
    本文详细介绍了如何在Web环境中开发一款连连看小游戏,适合初学者和技术爱好者参考。通过本文,您将了解游戏的基本结构、连线算法以及实现方法。 ... [详细]
author-avatar
mc_yang
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有