Angular Flex Layout代码重复问题：如何优雅去除重复指令？

嘿，这个重复代码的问题我太懂了——每次写一堆重复的ngClass.lt-md和fxHide/fxShow.lt-md真的很繁琐，下面几个方案能帮你优雅解决，让代码清爽很多：

方案一：纯CSS利用Angular Flex的全局断点类（最推荐） #

Angular Flex Layout会自动在页面的<body>标签上添加当前视口对应的断点类（比如屏幕小于md时，body会带上lt-md类）。我们可以直接利用这个全局类，通过CSS批量控制子元素的样式和显示状态，完全摆脱重复指令：

第一步：编写CSS样式 #

/* 当处于lt-md断点时，给父容器下的所有子div应用mobile-cell样式 */
.lt-md .cell-parent > div {
  /* 这里复制你原来.mobile-cell类的所有样式 */
  padding: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  /* 其他样式... */
}

/* 控制移动端标签的显示隐藏：默认隐藏，lt-md断点下显示 */
.mobile-label {
  display: none !important;
}
.lt-md .mobile-label {
  display: inline-block !important;
}

第二步：简化HTML结构 #

现在只需要给父容器加一个类，子元素完全不用重复指令了：

<div class="cell-parent">
  <div>
    <span class="mobile-label">Text1</span>
  </div>
  <div>
    <span class="mobile-label">Text2</span>
  </div>
  <div>
    <span class="mobile-label">Text3</span>
  </div>
  <!-- 更多子元素... -->
</div>

这个方案的优势是零额外代码、纯CSS实现，完全符合你想要的简洁性，而且后续修改移动端样式只需要改一处CSS即可。

方案二：自定义Angular指令（适合需要复杂逻辑的场景） #

如果你的移动端逻辑不止是样式和显示隐藏，还需要更多交互或动态逻辑，可以封装一个自定义指令，把重复的逻辑集中起来：

第一步：创建自定义指令 #

import { Directive, ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';
import { MediaObserver, MediaChange } from '@angular/flex-layout';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[mobileCell]'
})
export class MobileCellDirective implements OnInit, OnDestroy {
  private mediaSub!: Subscription;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private mediaObserver: MediaObserver
  ) {}

  ngOnInit() {
    // 监听lt-md断点的变化
    this.mediaSub = this.mediaObserver.observe('lt-md').subscribe((change: MediaChange) => {
      const isMobile = change.matches;
      const labelElement = this.el.nativeElement.querySelector('.mobile-label');

      // 控制mobile-cell类的添加/移除
      if (isMobile) {
        this.renderer.addClass(this.el.nativeElement, 'mobile-cell');
        if (labelElement) this.renderer.setStyle(labelElement, 'display', 'inline-block');
      } else {
        this.renderer.removeClass(this.el.nativeElement, 'mobile-cell');
        if (labelElement) this.renderer.setStyle(labelElement, 'display', 'none');
      }
    });
  }

  ngOnDestroy() {
    // 记得取消订阅，避免内存泄漏
    if (this.mediaSub) this.mediaSub.unsubscribe();
  }
}

第二步：使用指令简化HTML #

<div>
  <div mobileCell>
    <span class="mobile-label">Text1</span>
  </div>
  <div mobileCell>
    <span class="mobile-label">Text2</span>
  </div>
  <div mobileCell>
    <span class="mobile-label">Text3</span>
  </div>
  <!-- 更多子元素... -->
</div>

这个方案把重复逻辑封装在指令里，后续修改移动端行为只需要更新指令代码，适合逻辑复杂的场景。

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