Bindung an die Größe des Elements (div)

Question

Ich habe eine Komponente mit den Eigenschaften Breite und Höhe. Wie kann ich die Ansichtshöhe und -breite der Komponenten an diese Eigenschaften binden?

Ich brauche sie aktualisiert werden, wenn auch die Größe der Komponente ändert, d. H. Durch Größenanpassung des Browser-Fensters.

Answer 1

Verwenden Sie (window:resize)="onResize($event)", um globale Ereignisse zu hören. Sie können window, document oder body als Ziele verwenden. Siehe this plunk

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div 
     class="square" 
     [style.width.px]="width" 
     [style.height.px]="height" 
     (window:resize)="onResize($event)" 
    ></div> 
    ` 
}) 
export class App { 
    width = 100; 
    height = 100; 

    onResize(event) { 
    this.width += 100; 
    this.height += 100; 
    } 
}