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

我正在编写一个需要在调整大小时动态更改其内容的Angular2组件。我现在用的实验渲染器@角/核心（V2.1.0），可连线了以下点击收听：在Angular2组件中侦听组件大小调整事件的最佳方法是什么？

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

但不幸的是，我不能为resize事件做同样的 - 无论是“调整”或“”的onResize不工作：

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

我能够拿起浏览器中使用以下调整事件：

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

但遗憾的是并不是所有的组件在我的应用程序调整是由于浏览器调整大小。

基本上，我正在寻找JQuery的等价的：

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

来源

2016-11-24 Michael McGowan

Thete对元素没有调整大小事件，只在窗口上。 jQuery可能使用轮询。 –

感谢您在正确的方向引导我，Günter！我要么使用Marc的库http://marcj.github.io/css-element-queries/，要么执行一个指令，为一个元素注册一个变异观察者。 –

我最终实现使用的元素，调整大小，检测库（https://github.com/wnr/element-resize-detector）的服务。找不到一个打字稿定义文件，但与一些帮助（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); 
    } 
}

来源

2016-12-08 22:36:06

优秀的解决方案，就像一个魅力！ – Liquinaut

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

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

来源

2017-06-05 22:47:25 PRAISER

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

回答

相关问题