Angular 6 изменить глобальный CSS на основе критериев

Question

У меня есть следующее требование: на сайте есть много элементов, кнопок, текстового поля и т. Д., Которые должны изменить размер шрифта, цвет и т. Д. В зависимости от пользователя, который вошел в систему. Каков наилучший способ добиться этого?например, если пользователь A вошел в систему, кнопки на сайте должны быть зелеными, для пользователя B - голубыми, для пользователя c желтыми и т. д. Весь CSS должен меняться в зависимости от того, кто вошел в систему. Мои первоначальные мысли - каким-то образом использовать Angular universal.Есть мысли, предложения?

Answer 1

Если вы хотите установить только цвет фона:

<button [style.backgroundColor]="getColor()" ...></button>

TS

  getColor(){
    if(user.something=='A')
      return 'blue'
    .
    .
    .
    }

Если вы хотите установить несколько стилей Я рекомендую вам использоватьngClass:

<div [ngClass]="user.something"><div>

в css:

.a{
...
}
.b{
...
}

Answer 2

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

HTML

<span style="width:100%;color: #fff;padding: 3%;border-radius: 5px;" [ngStyle]="{'background-color':getColor(a.actions[0])}">
            {{a.actions[0]}}
          </span> &nbsp;
          <span style="width:100%;color: #fff;padding: 3%;border-radius: 5px;" [ngStyle]="{'background-color':getColor(a.actions[1])}">
            {{a.actions[1]}}
          </span>

TS PART

getColor(color) {
    switch (color) {
      case 'Enable':
        return 'green';
      case 'Perma Disable':
        return 'red';
      case 'Temp Disable':
        return 'purple';
    }
  }