如何在Angular 2应用程序的SCSS文件中使用动态数据？

我正在做一个汉堡包，如下所示

<div class="hamburger">
  <div 
    [ngStyle]="{
      backgroundColor: theme.majorTextColor
    }" 
    class="hamburger-line"
  ></div>
  <div 
    [ngStyle]="{
      backgroundColor: theme.majorTextColor
    }" 
    class="hamburger-line"
  ></div>
  <div 
    [ngStyle]="{
      backgroundColor: theme.majorTextColor
    }" 
    class="hamburger-line"
  ></div>
</div>

---

我希望每一行都有一个我动态决定的背景色。因此，我无法将其直接添加到SCSS文件中。但如果我做了以上的事情，我就是在重复我自己。如何在不为汉堡包生产线创建单独组件的情况下，以干燥的方式实现这一点

您可以在组件中定义样式。ts：

readonly hamburgerStyle = { backgroundColor: this.theme.majorTextColor };

您可以更新您的组件：

<div class="hamburger">
  <div 
    [ngStyle]="hamburgerStyle" 
    class="hamburger-line"
  ></div>
  <div 
    [ngStyle]="hamburgerStyle" 
    class="hamburger-line"
  ></div>
  <div 
    [ngStyle]="hamburgerStyle" 
    class="hamburger-line"
  ></div>
</div>

<div class="hamburger">
  <ng-container [ngTemplateOutlet]="hamburgerLine"></ng-container>
  <ng-container [ngTemplateOutlet]="hamburgerLine"></ng-container>
  <ng-container [ngTemplateOutlet]="hamburgerLine"></ng-container>
</div>

<ng-template #hamburgerLine>
  <div 
    [ngStyle]="{
      backgroundColor: theme.majorTextColor
    }" 
    class="hamburger-line"
  ></div>
</ng-template>