在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組件中偵聽組件大小調整事件的最佳方法是什麼？

回答

相關問題