Angular 2中SCSS动态数据使用及汉堡菜单DRY写法优化

好问题！针对你遇到的重复代码问题，以及想在Angular SCSS中使用动态数据的需求，我给你两个实用的方案：

1. 用*ngFor实现DRY风格的汉堡菜单（无需新增组件） #

你现在的代码重复是因为手动写了三次相同的.hamburger-line元素，我们可以用Angular的*ngFor循环来生成这些元素，只需要写一次模板代码即可：

步骤1：在组件类中定义线条数量 #

// 组件.ts文件
export class YourComponent {
  // 汉堡菜单的线条数量，这里设为3条
  hamburgerLineCount = Array(3);
  // 假设你的theme已在组件中可访问
  theme = { majorTextColor: '#333' }; // 示例颜色
}

步骤2：在模板中用*ngFor循环生成线条 #

<div class="hamburger">
  <div 
    *ngFor="let _ of hamburgerLineCount"
    [ngStyle]="{ backgroundColor: theme.majorTextColor }"
    class="hamburger-line"
  ></div>
</div>

以后如果要调整线条数量，只需要修改hamburgerLineCount的长度就行，完全避免了重复代码。

2. 在Angular SCSS中使用动态数据的方法 #

如果想把样式逻辑集中到SCSS文件中，同时支持动态值，推荐使用CSS自定义属性（变量），Angular可以很方便地将动态值注入到CSS变量中，再在SCSS里引用：

步骤1：在模板中给父元素绑定CSS变量 #

<div 
  class="hamburger"
  [style.--hamburger-line-color]="theme.majorTextColor"
>
  <!-- 结合上面的*ngFor，不用每条线条都加ngStyle -->
  <div *ngFor="let _ of hamburgerLineCount" class="hamburger-line"></div>
</div>

步骤2：在SCSS文件中引用这个CSS变量 #

.hamburger {
  // 汉堡菜单的基础布局样式，比如：
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;

  .hamburger-line {
    width: 24px;
    height: 2px;
    // 使用动态注入的CSS变量
    background-color: var(--hamburger-line-color);
  }
}

这种方法把样式逻辑集中在SCSS里，模板只负责传递动态值，代码更清晰，同时也实现了DRY原则。

额外小优化 #

如果你的theme是通过服务或全局变量提供的，还可以用@HostBinding在组件类中直接设置CSS变量，进一步简化模板：

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

export class YourComponent {
  @HostBinding('style.--hamburger-line-color')
  get hamburgerLineColor() {
    return this.theme.majorTextColor;
  }

  theme = { majorTextColor: '#333' };
}

这时模板可以简化成：

<div class="hamburger">
  <div *ngFor="let _ of Array(3)" class="hamburger-line"></div>
</div>

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