要素（div）のサイズにバインド

Question

私は、幅と高さのプロパティを持つコンポーネントを持っています。コンポーネントのビューの高さと幅をこれらのプロパティにバインドするにはどうすればよいですか？

コンポーネントのサイズが変更されるたびに、つまりブラウザウィンドウのサイズを変更することによって、それらを更新する必要があります。

Answer 1

(window:resize)="onResize($event)"を使用してグローバルイベントを聞きます。 window,documentまたはbodyをターゲットとして使用できます。 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; 
    } 
}