Angular模板中判断移动端的冗余代码优化方案咨询

方案1：全局响应式服务 + 异步管道 #

创建全局服务统一处理移动端判断，支持窗口尺寸变化实时更新，彻底消除组件重复代码：

// responsive.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ResponsiveService {
  private isMobileSubject = new BehaviorSubject<boolean>(this.checkIsMobile());
  isMobile$: Observable<boolean> = this.isMobileSubject.asObservable();

  constructor() {
    window.addEventListener('resize', () => {
      this.isMobileSubject.next(this.checkIsMobile());
    });
  }

  private checkIsMobile(): boolean {
    return Util.isMobile(); // 复用现有Util工具方法
  }
}

组件中注入服务，模板直接用异步管道绑定：

<custom-button [align]="(responsiveService.isMobile$ | async) ? 'center' : 'left'"></custom-button>

组件类仅需注入服务，无需额外方法：

// 任意组件.ts
import { ResponsiveService } from './responsive.service';

constructor(private responsiveService: ResponsiveService) {}

方案2：自定义属性指令 #

写一个属性指令，把对齐逻辑封装进去，模板无需手动写判断：

// mobile-align.directive.ts
import { Directive, HostBinding, OnInit, OnDestroy } from '@angular/core';
import { ResponsiveService } from './responsive.service';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[mobileAlign]'
})
export class MobileAlignDirective implements OnInit, OnDestroy {
  @HostBinding('align') align!: string;
  private sub!: Subscription;

  constructor(private responsiveService: ResponsiveService) {}

  ngOnInit(): void {
    this.sub = this.responsiveService.isMobile$.subscribe(isMobile => {
      this.align = isMobile ? 'center' : 'left';
    });
  }

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

模板中直接使用指令即可：

<custom-button mobileAlign></custom-button>

方案3：增强自定义按钮组件 #

让custom-button自身支持自动对齐逻辑，添加输入属性控制：

// custom-button.component.ts
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { ResponsiveService } from './responsive.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html'
})
export class CustomButtonComponent implements OnInit, OnDestroy {
  @Input() align?: string;
  @Input() autoAlign = false;
  private sub!: Subscription;

  constructor(private responsiveService: ResponsiveService) {}

  ngOnInit(): void {
    if (this.autoAlign) {
      this.sub = this.responsiveService.isMobile$.subscribe(isMobile => {
        this.align = isMobile ? 'center' : 'left';
      });
    }
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe();
  }
}

使用时只需开启自动对齐：

<custom-button autoAlign></custom-button>

方案4：自定义管道（简单场景） #

如果不需要监听窗口实时变化，用管道简化模板写法：

// is-mobile.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'isMobile' })
export class IsMobilePipe implements PipeTransform {
  transform(): boolean {
    return Util.isMobile();
  }
}

模板中直接调用：

<custom-button [align]="(true | isMobile) ? 'center' : 'left'"></custom-button>

（注：传true仅为占位，管道无需参数；若需响应式更新，优先选择服务+异步管道方案）

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