Как использовать данные Dynami c в файле S CSS приложения Angular 2?

Question

Я делаю гамбургер следующим образом.

<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>

Я хочу, чтобы каждая строка имела цвет фона, который я выбираю динамически. Поэтому я не могу добавить это непосредственно в файл S CSS. Но если я делаю вышеизложенное, я повторяюсь. Как мне сделать это в стиле DRY без создания отдельного компонента для линии гамбургеров?

Answer 1

Вы можете либо определить стиль в ваших component.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>

---

Или вы можете использовать ng-template и используйте ngTemplateOutlet, чтобы вставить его (или используйте оба):

<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>