Угловой компонент шаблона глобального динамического шрифта

Question

Я пытаюсь разрешить пользователю изменять шрифт, который должен динамически обновлять компонент.

Поскольку компонент отображает довольно много компонентов материала, существует множество стилей 'Roboto'.

Если я добавлю это в глобальный styles.css

* {
    font-family: Lato !important;
  }

Он успешно переопределит все другие стили шрифтов.

Но как сделать это динамичным?Я попытался использовать встроенный тег сценария в шаблоне, но этот код обрезается по углу (имеет смысл, кроме этого примера).

Я попробую тег динамической таблицы стилей link, но это означает создание таблицы стилей длякаждый шрифт, правильный пита.(у нас есть 14 шрифтов).

Answer 1

Вы можете создать класс для каждого шрифта и применить класс, используя [ngClass]

Например, создать класс serif, например, так:

.serif * {
    font-family: serif !important;
}

Затем применитьэто к вашему AppComponent с ngClass:

<div [ngClass]="fontClass">

Где fontClass - это переменная, установленная в файле ts.