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相当的：

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

Answer 1

我最终实现了一个使用element-resize-detector库（https://github.com/wnr/element-resize-detector）的服务。找不到TypeScript定义文件但有一点帮助（Use element-resize-detector library in an Angular2 application），实现了以下内容：

<强>元素调整大小-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

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

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

Answer 3

这个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 4

使用@thalesrc/ng-utils和@thalesrc/resize-manager

非常容易

安装：npm i -S @thalesrc/ng-utils @thalesrc/resize-manager

import { ResizeModule } from '@thalesrc/ng-utils/resize';

@NgModule({
  imports: [
    ResizeModule
  ],
})
export class YourModule { }

然后

<your-component thaResize (onResize)="postSizeChange($event)"></your-component>

或

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

  ngOnInit() {
    this.resizeService.observe(this.el.nativeElement).subscribe(({width, height}) => {
      console.log(width, height);
    });
  }
}

Answer 5

使用 ngDoCheck 生命周期挂钩，而不是执行上述所有方法，它只会检测组件中的任何更改，您只需在doCheck中添加一个条件即可执行操作。

这可能不是确切的方法，但如果你想检测组件的任何变化，那么调整div的大小也是一个改变，所以最好使用 doCheck 生命周期钩子
DoCheck

Answer 6

作为替代方案，为了能够收听正在调整大小的特定容器，我们可以使用 HTML中的(window:resize)="onResize($event)" 并可以在方法onResize(event: UIEvent)的组件中进行调整大小所需的任何操作。

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

6 个答案: