如何用Angular ngClass结合Bootstrap btn-sm实现响应式按钮（非媒体查询）？

除了写媒体查询，你可以试试下面这些更贴合Angular生态的实现方式：

1. 用Angular CDK的BreakpointObserver监听断点 #

直接读window.screen.width的问题在于窗口尺寸变化时不会自动更新，而Angular CDK的BreakpointObserver能主动监听窗口尺寸变化，还能直接复用Bootstrap的断点阈值（比如xs断点对应<576px），比手动判断更可靠。

先确保安装Angular CDK：

npm install @angular/cdk

组件内实现代码：

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  template: `<button [ngClass]="{ 'btn-sm': isSmallScreen$ | async }">Edit</button>`
})
export class YourComponent {
  isSmallScreen$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 监听Bootstrap的xs断点（屏幕宽度<576px）
    this.isSmallScreen$ = this.breakpointObserver.observe(Breakpoints.XSmall)
      .pipe(map(result => result.matches));
  }
}

窗口缩放时，按钮会自动切换类，无需手动处理resize事件。

2. 封装自定义指令复用逻辑 #

如果多个按钮都需要这个功能，写个自定义指令能减少重复代码，让模板更简洁。

创建small-btn.directive.ts：

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[appSmallBtn]'
})
export class SmallBtnDirective implements OnInit, OnDestroy {
  private subscription: Subscription;

  constructor(private el: ElementRef, private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    this.subscription = this.breakpointObserver.observe(Breakpoints.XSmall)
      .subscribe(result => {
        result.matches 
          ? this.el.nativeElement.classList.add('btn-sm')
          : this.el.nativeElement.classList.remove('btn-sm');
      });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

模板中直接使用指令：

<button appSmallBtn>Edit</button>

所有添加appSmallBtn指令的按钮都会自动根据屏幕尺寸切换btn-sm类。

3. 用全局服务管理响应式状态 #

如果应用多处需要判断屏幕尺寸，可以把断点逻辑抽到全局服务中，统一复用：

创建responsive.service.ts：

import { Injectable } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ResponsiveService {
  isXSmall$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.isXSmall$ = this.breakpointObserver.observe(Breakpoints.XSmall)
      .pipe(map(result => result.matches));
  }
}

组件内注入服务使用：

import { Component } from '@angular/core';
import { ResponsiveService } from './responsive.service';

@Component({
  selector: 'app-your-component',
  template: `<button [ngClass]="{ 'btn-sm': isXSmall$ | async }">Edit</button>`
})
export class YourComponent {
  isXSmall$ = this.responsiveService.isXSmall$;

  constructor(private responsiveService: ResponsiveService) {}
}

这种方式适合大型应用，统一管理响应式状态，避免重复逻辑。

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