在Angular2组件中侦听组件调整大小事件的最佳方法是什么？

Question

我正在编写一个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(() => {
  ...
});

Answer 1

我最终实现了一个使用element-resize-detector库的服务(https://github.com/wnr/element-resize-detector).找不到TypeScript定义文件但有一些帮助(在Angular2应用程序中使用element-resize-detector库),实现了以下内容:

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

resize.service.ts

import { Injectable } from '@angular/core';
import * as elementResizeDetectorMaker from 'element-resize-detector';

@Injectable()
export class ResizeService {
  private resizeDetector: any;

  constructor() {
    this.resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
  }

  addResizeEventListener(element: HTMLElement, handler: Function) {
    this.resizeDetector.listenTo(element, handler);
  }

  removeResizeEventListener(element: HTMLElement) {
    this.resizeDetector.uninstall(element);
  }
}

我-component.ts

import { Component } from '@angular/core';
import { ResizeService } from '../resize/index';

@Component({
  selector: 'my-component',
  template: ``
})
export class MyComponent {
  constructor(private el: ElementRef, private resizeService: ResizeService) {
  }

  ngOnInit() {
    this.resizeService.addResizeEventListener(this.el.nativeElement, (elem) => {
      // some resize event code...
    });
  }

  ngOnDestroy() {
    this.resizeService.removeResizeEventListener(this.el.nativeElement);
  }
}

Answer 2

这个 angular 7 库做得很好：https : //www.npmjs.com/package/angular-resize-event

<div (resized)="onResized($event)"></div>

import { Component } from '@angular/core';

// Import the resized event model
import { ResizedEvent } from 'angular-resize-event';

@Component({...})
class MyComponent {
  width: number;
  height: number;

  onResized(event: ResizedEvent) {
    this.width = event.newWidth;
    this.height = event.newHeight;
  }
}

Answer 3

我写了这个Angular2 指令来解决这个问题。

您可以通过npm install bound-sensor. 使用这种方法的好处是，一旦组件父级的大小发生变化，它就会告诉您，并且它不依赖于窗口大小的调整！想象一下，您需要根据其父级的大小扩展和刷新您的内容，这很容易解决。