在Angular中如何根据屏幕尺寸动态切换不同CSS类？

问题原因 #

你的代码没有生效主要有两个核心原因：

1. 宽度判断逻辑仅在组件初始化时执行了一次，后续窗口尺寸变化时不会重新触发判断
2. 若逻辑执行时机早于组件模板初始化，变量变更无法同步到视图上

解决方案 #

方案1：使用Angular CDK BreakpointObserver（官方推荐）

这是Angular官方提供的响应式断点处理工具，不需要手动处理事件监听和变更检测，兼容性更好。
首先在对应模块中导入布局模块：

import { LayoutModule } from '@angular/cdk/layout';

@NgModule({
  imports: [
    // 其他已有导入
    LayoutModule
  ]
})
export class YourModule { }

在组件中使用断点监听：

import { BreakpointObserver } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';

export class YourComponent {
  public miniClass = false;
  public extendedClass = true;
  private breakpointSub: Subscription;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 订阅<=768px的断点变化
    this.breakpointSub = this.breakpointObserver.observe('(max-width: 768px)')
      .subscribe(result => {
        this.miniClass = result.matches;
        this.extendedClass = !result.matches;
      });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.breakpointSub.unsubscribe();
  }
}

方案2：原生监听resize事件（无需引入额外依赖）

如果不想引入Angular CDK，可以用HostListener监听窗口缩放事件，加上防抖优化性能：

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

export class YourComponent {
  public miniClass = false;
  public extendedClass = true;
  private resizeTimer: number | null = null;

  ngOnInit() {
    // 组件初始化时先执行一次判断，保证初始样式正确
    this.checkScreenWidth();
  }

  @HostListener('window:resize')
  onWindowResize() {
    // 防抖：300ms内多次缩放只执行一次判断，避免性能损耗
    if (this.resizeTimer) clearTimeout(this.resizeTimer);
    this.resizeTimer = setTimeout(() => {
      this.checkScreenWidth();
    }, 300);
  }

  private checkScreenWidth() {
    const isMobile = window.innerWidth <= 768;
    this.miniClass = isMobile;
    this.extendedClass = !isMobile;
  }
}

补充备选方案（纯CSS实现）

如果不需要通过TS变量控制其他联动逻辑，也可以直接用CSS媒体查询覆盖样式，无需修改TS代码：

/* 写在全局样式或者组件样式文件中 */
@media (max-width: 768px) {
  .mdc-fab.mdc-fab--extended {
    /* 覆盖extended类的样式，实现和mini类一致的效果，可根据你使用的Angular Material版本调整对应属性 */
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }
  .mdc-fab__label {
    display: none;
  }
}

以上三个方案都可以适配你现有的模板代码，无需修改[ngClass]相关逻辑。

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