एक कोणीय 2 घटक के भीतर घटक आकार बदलने की घटनाओं को सुनने का सबसे अच्छा तरीका क्या है?

Question

मैं एक कोणीय 2 घटक लिख रहा हूं जिसे आकार बदलने पर गतिशील रूप से अपनी सामग्री को बदलने की आवश्यकता है। मैं में प्रयोगात्मक रेंडरर का उपयोग कर रहा @ कोणीय/कोर (v2.1.0) और निम्नलिखित के साथ एक क्लिक श्रोता ऊपर तार कर सकते हैं:

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

लेकिन दुर्भाग्य से मैं एक आकार बदलने घटना के लिए भी ऐसा ही नहीं कर सकते हैं - दोनों 'का आकार परिवर्तन' या '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 द्वारा इंस्टॉल कर सकते हैं। इस विधि का उपयोग करने का लाभ यह है कि यह आपको घटक परिवर्तन के माता-पिता के आकार के एक बार बताता है और यह विंडो आकार बदलने पर निर्भर नहीं है! कल्पना करें कि आपको अपने माता-पिता के आकार पर अपनी सामग्री आधार को विस्तार और ताज़ा करने की आवश्यकता है, इससे आसानी से हल हो जाता है।