如何在elementRef宽度改变时更改模板

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor(private elementRef: ElementRef) { }

  ngOnInit(): void {
    // 在ngOnInit生命周期钩子函数中监听元素宽度变化
    this.observeWidthChanges();
  }

  observeWidthChanges(): void {
    // 使用ResizeObserver来监听元素宽度变化
    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        // 当宽度发生变化时，执行相应的操作
        if (entry.contentRect) {
          const newWidth = entry.contentRect.width;
          // 执行模板中的操作，例如更新数据或调用其他方法
          this.updateTemplate(newWidth);
        }
      }
    });

    // 监听当前组件的宿主元素
    observer.observe(this.elementRef.nativeElement);
  }

  updateTemplate(width: number): void {
    // 根据宽度变化更新模板中的内容或执行其他操作
    // 例如，可以根据宽度变化来改变样式、显示不同的内容等
  }
}