Angular2コンポーネント内のコンポーネントのサイズ変更イベントをリッスンする最適な方法は何ですか？

Question

私は、サイズ変更時にコンテンツを動的に変更する必要があるAngular2コンポーネントを作成しています。私は、@角度/コア（バージョン2.1.0）で実験的レンダラを使用していますし、次にクリックリスナーを配線することができます

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(() => { 
    ... 
}); 

Answer 1

私は要素サイズ変更検出器ライブラリ（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); 
    } 
} 

Answer 2

私はこれを解決するためにAngular2 directiveを書きました。

npm install bound-sensorでインストールできます。 このメソッドを使用する利点は、コンポーネントの親のサイズが変更され、ウィンドウのサイズ変更に依存しないことを通知することです。親のサイズに基づいてコンテンツベースを拡張して更新する必要があるとしたら、簡単に解決できます。