Динамическое создание классов CSS во время выполнения в Angular 7

Question

У меня есть приложение Angular 7, где мне нужно динамически генерировать классы CSS в моем компоненте во время выполнения.

Прежде всего: я знаю о [ngStyle] и [ngClass]! Мне нужно кое-что сделать с помощью псевдо-селекторов, которые я не могу сгенерировать, используя их.

Теперь наивный подход: я просто буду использовать Angular для шаблонирования моего CSS!

<style *ngFor="let class of classes">
    .{{class.prefix}}-target {
        border: 1px solid maroon;
        text-align: center;
      }

      .{{class.prefix}}-control:hover ~ .{{class.prefix}}-target {
          background: red;
        }
  </style>

Проблемы с этим подходом:

1. VS Code жалуется, что я помещаю шаблоны Angular в класс CSS.
2. Angular не интерполирует {{class.prefix}} в конечном итоговом HTML - он буквально помещает туда {{class.prefix}}.

Есть ли способ сделать это в Angular, с помощью библиотеки, которая предназначена для этого, или подход, который я могу использовать? Заранее спасибо!

Answer 1

В зависимости от того, насколько динамичным должен быть компонент ...

Вы можете объявить префикс (или динамически сгенерировать его) вне класса компонента.Затем используйте строку шаблона JavaScript для интерпретации стилей до их обработки метаданными декоратора @Component ().

Примерно так:

const classPrefix = 'bar';

@Component({
  selector: 'app-foo',
  template: `
    <!-- Your HTML template -->
  `,
  styles: [`
    .${classPrefix}-target {
        border: 1px solid maroon;
        text-align: center;
    }
    .${classPrefix}-control:hover ~ ${classPrefix}-target {
        background: red;
    }
`]
})
export class FooComponent {
/* . . . */
}