resize - event - El componente Angular2 escucha cuando cambia el tamaño de los padres

resize js

Question

Tengo un requisito en el que quiero cambiar las propiedades de un componente secundario dependiendo del tamaño de su componente principal a través de una llamada a un método. El problema al que me estoy enfrentando es que el único evento de cambio de tamaño que puedo escuchar es el de la ventana, que no ayuda ya que el tamaño de la ventana no está cambiando, solo el componente principal se debe a una apertura y cierre div del panel lateral.

La única posibilidad que puedo ver en este momento es tener algún tipo de sondeo en el que dentro del componente secundario mismo se compruebe si su ancho ha cambiado cada x cantidad de tiempo.

¡Gracias por tu ayuda!

Answer 1

Tiene razón en que no puede obtener el evento de cambio de tamaño en un div (sin instalar alguna extensión js). Pero algo como esto funciona.

El componente principal:

import {Component, AfterContentInit, ElementRef} from ''@angular/core'';
import { ChildComponent } from "./ChildComponent";

export interface IParentProps {
    width: number;
    height: number;
}
@Component({
    selector: ''theParent'',
    template: `text text  text text text text
               text text text text text text
               <the-child [parentProps]="parentProps"></the-child>`,
    directives: [ChildComponent] 
})

export class ParentComponent implements AfterContentInit {
    sizeCheckInterval = null;
    parentProps: IParentProps = {
        width: 0,
        height: 0
    }
    constructor(private el: ElementRef) {
    }
    ngAfterContentInit() {
        this.sizeCheckInterval = setInterval(() => {
            let h = this.el.nativeElement.offsetHeight;
            let w = this.el.nativeElement.offsetWidth;
            if ((h !== this.parentProps.height) || (w !== this.parentProps.width)) {
                this.parentProps = {
                    width: w,
                    height: h

                }
            }
        }, 100);

    }
    ngOnDestroy() {
        if (this.sizeCheckInterval !== null) {
            clearInterval(this.sizeCheckInterval);
        }
    }
}

El componente secundario:

import {Component, Input, SimpleChange} from "@angular/core";
import { IParentProps } from "./ParentComponent";

@Component({
    directives: [],
    selector: "the-child",
    template: `child`
})
export class ChildComponent {
    @Input() parentProps: IParentProps;
    constructor() {
        this.parentProps = {
            width: 0,
            height: 0
        }
    }
    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        this.parentProps = changes["parentProps"].currentValue;
        console.log("parent dims changed");
    }

}