Angular Material自定义响应式优先级水平工具栏闪烁及首屏适配异常问题

故障1：页面首次加载不自动适配尺寸 #

• 根因：未在Angular组件视图完全渲染完成的生命周期节点触发宽度计算逻辑，首次加载时DOM元素还未挂载完成，拿到的工具栏、图标宽度都是无效值，导致适配逻辑不生效。
• 修复方案：在组件的ngAfterViewInit生命周期钩子中调用宽度计算方法，可加一层0ms的setTimeout确保DOM渲染完成，代码示例：

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

// ...组件其他代码
ngAfterViewInit(): void {
  setTimeout(() => {
    this.calcWidth();
  }, 0)
}

故障2：调整窗口大小时图标持续闪烁 #

• 根因：有两个核心触发点：
  1. resize事件触发频率极高，每次触发都会执行计算逻辑、修改显隐数组，触发Angular变更检测反复重排DOM，形成「宽度不足移走图标->重排后宽度足够放回图标」的死循环
  2. 计算宽度时没有提前预留「更多」按钮的占位宽度，导致判断是否能放下图标的逻辑来回震荡
• 修复方案：
  1. 给resize事件加防抖处理，推荐设置200~300ms的防抖间隔，避免高频触发计算
  2. 计算可用宽度时先减去「更多」按钮的固定宽度，再判断图标是否能放下
  3. 计算过程中先用临时变量存储最终的显隐结果，计算完成后一次性替换原有的显隐数组，减少变更检测触发次数
     代码示例：

// 防抖定时器变量
private resizeTimeout: any;
@HostListener('window:resize')
onWindowResize() {
  if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
  this.resizeTimeout = setTimeout(() => {
    this.calcWidth();
  }, 200);
}

// calcWidth方法核心逻辑调整
calcWidth() {
  // 提前预留更多按钮的宽度，按实际按钮尺寸调整数值
  const moreBtnWidth = 48;
  const availableWidth = this.toolbar.nativeElement.offsetWidth - moreBtnWidth;
  let currentUsedWidth = 0;
  // 用临时数组存储计算结果，不要边计算边修改原数组触发变更检测
  const tempVisible = [];
  for (const item of this.toolbarItems) {
    // 单个图标的宽度可固定赋值或动态读取DOM宽度
    const itemWidth = 48;
    if (currentUsedWidth + itemWidth <= availableWidth) {
      tempVisible.push(item);
      currentUsedWidth += itemWidth;
    } else {
      break;
    }
  }
  // 一次性更新显隐数据
  this.visibleItems = tempVisible;
  this.hiddenItems = this.toolbarItems.filter(item => !tempVisible.includes(item));
}

内容的提问来源于stack exchange，提问作者B.Cos