小编Mic*_*wan的帖子

我正在编写一个Angular2组件,需要在调整大小时动态更改其内容.我在@ angular/core(v2.1.0)中使用实验性渲染器,并可以使用以下内容连接点击监听器:

this.rollupListener = this.renderer.listen(this.rollUp, 'click', (event) => {
  ...
});

但不幸的是,我不能对resize事件做同样的事情 - 'resize'或'onresize'都不起作用:

this.resizeListener = this.renderer.listen(this.container, 'resize', (event) => {
  // this never fires :(
});

我可以使用以下内容获取浏览器调整大小事件:

@HostListener('window:resize', ['$event.target'])
onResize() {
  ...
}

但遗憾的是,并非我的应用程序中的所有组件大小调整都是由于浏览器调整大小.

基本上,我正在寻找相当于JQuery的JQuery:

$(this.container).resize(() => {
  ...
});

我试图在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' }); …