Angular中浏览器窗口resize时自动更新DOM属性objHeight的问题

没问题，我帮你搞定这个窗口尺寸变化时元素无法自动适配的问题！你已经有onResize触发的基础，现在核心是让objHeight的更新能触发Angular的变更检测，从而同步更新[ngStyle]绑定的transform样式。以下是具体实现步骤和代码示例：

1. 确保objHeight是组件响应式属性 #

首先把objHeight定义为组件的类属性，Angular会自动监听这类属性的变化并更新视图。同时推荐用Angular的@HostListener来监听窗口resize事件，比手动绑定addEventListener更符合Angular的最佳实践。

TS文件示例 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 定义用于样式绑定的属性
  objHeight = 0;
  // 你的角度数组示例
  rotateAngleArray = [15, 30, 45, 60];

  ngOnInit() {
    // 组件初始化时先计算一次objHeight，避免初始样式异常
    this.calculateObjHeight();
  }

  // 监听窗口resize事件，$event是事件对象
  @HostListener('window:resize', ['$event'])
  onResize(event: Event) {
    // 每次resize时重新计算objHeight
    this.calculateObjHeight();
  }

  // 封装计算逻辑，方便复用和维护
  private calculateObjHeight() {
    // 这里替换成你实际的objHeight计算逻辑
    // 示例：根据窗口高度的比例计算
    this.objHeight = window.innerHeight * 0.15;
    // 如果你需要基于某个元素的尺寸计算，也可以这样：
    // const targetEl = document.getElementById('your-target-element');
    // if (targetEl) this.objHeight = targetEl.offsetHeight;
  }
}

2. 正确绑定[ngStyle] #

在HTML里保持你的transform样式绑定逻辑即可，因为objHeight更新后Angular会自动重新计算样式：

HTML文件示例 #

<!-- 假设你是通过*ngFor循环渲染元素 -->
<div 
  *ngFor="let angle of rotateAngleArray; let i = index"
  [ngStyle]="{
    'transform': `rotate(${angle}deg) translate(0,-${objHeight}px) rotate(-${angle}deg)`
  }"
  class="your-element-class"
>
  你的元素内容
</div>

这里用了ES6的模板字符串语法，比字符串拼接更清晰易读，推荐使用。

3. 进阶优化：防抖与OnPush模式适配 #

防抖处理 #

窗口resize事件会频繁触发，为了避免频繁计算导致性能问题，可以加个定时器防抖：

private resizeDebounceTimer: any;

@HostListener('window:resize', ['$event'])
onResize(event: Event) {
  // 清除上一次的定时器
  clearTimeout(this.resizeDebounceTimer);
  // 200ms后执行计算，可根据需求调整延迟时间
  this.resizeDebounceTimer = setTimeout(() => {
    this.calculateObjHeight();
  }, 200);
}

OnPush变更检测模式适配 #

如果你的组件使用了changeDetection: ChangeDetectionStrategy.OnPush，需要手动触发变更检测：

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

// 组件元数据里开启OnPush
@Component({
  // ... 其他配置 ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  private calculateObjHeight() {
    this.objHeight = window.innerHeight * 0.15;
    // 标记组件需要检测变更
    this.cdr.markForCheck();
  }
}

内容的提问来源于stack exchange，提问作者Kamui