Angular2 bileşenindeki bileşen yeniden boyutlandırma olaylarını dinlemenin en iyi yolu nedir?

Question

Yeniden boyutlandırıldığında içeriğini dinamik olarak değiştirmesi gereken bir Angular2 bileşeni yazıyorum. Ben @ açısal/çekirdek (v2.1.0) deneysel Oluşturucu kullanıyorum ve aşağıdaki ile tıklama işleyicisi bağlayabilirsiniz:

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

Ama ne yazık ki yeniden boyutlandırma olay için aynı şeyi olamaz - hem 'boyutlandırmak'

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

Ama ne yazık ki benim uygulamada boyutlandırma tüm bileşen: Ben şu kullanarak olayları yeniden boyutlandırmak tarayıcıda almak mümkün duyuyorum

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

: ya da 'onresize' çalışmıyor Bir tarayıcı yeniden boyutlandırması nedeniyle.

Temelde, bir JQuery eşdeğer arıyorum:

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

Answer 1

ben eleman-boyutlandırma-detektör kitaplığı (https://github.com/wnr/element-resize-detector) kullanan bir hizmet uygulamada sona erdi. daktilo tanım dosyası bulmak ama küçük bir yardım (Use element-resize-detector library in an Angular2 application) ile aşağıdaki uygulanmadı Could:

eleman-boyutlandırma-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); 
    } 
} 

my-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

Bunu çözmek için bunu Angular2 directive yazdım.

npm install bound-sensor ile kurabilirsiniz. Bu yöntemin kullanılmasının avantajı, bileşen değişikliklerinin ebeveyni büyüklüğünde bir kez size bildirilmesidir ve pencere yeniden boyutlandırmaya bağlı değildir! İçerik tabanınızı ebeveyninin büyüklüğüne göre genişletmeniz ve yenilemeniz gerektiğini hayal edin, bu kolayca çözer.