如何在Angular2应用程序中让三个圆圈响应屏幕大小的变化？

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-circle',
  templateUrl: './circle.component.html',
  styleUrls: ['./circle.component.css']
})
export class CircleComponent {
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    // 获取窗口的宽度和高度
    const width = event.target.innerWidth;
    const height = event.target.innerHeight;

    // 根据窗口大小计算圆圈的新大小
    const circleSize = Math.min(width, height) / 5;

    // 更新圆圈的样式
    const circles = document.getElementsByClassName('circle');
    for (let i = 0; i < circles.length; i++) {
      const circle = circles[i] as HTMLElement;
      circle.style.width = circleSize + 'px';
      circle.style.height = circleSize + 'px';
    }
  }
}