Динамические классы в CSS и HTML используя Angular 9?

Question

[Alexey]

Многие видели вот такой код:


где, вместо человеко-понятных классов, используется хеш.
Google к примеру пользуется этой техникой.

Вопросы:
Каким образом это осуществить используя Angular, чтобы классы были синхронизированы между html и scss?

Answer 1

[Антон Швец]

При стандартных настройках ангуляр добавляет хтмл-элементам компонента свою метку, типа _nghost-lli-c18 или _ngcontent-rja-c18
Всем стилям компонента автоматически добавляется эта приписка, например в браузере будет выглядеть как

a[_ngcontent-rja-c18] {
    color: red;
}

В Ангуляре это зовется "инкапсуляция стилей", является дефолтным поведением и может быть выключено или изменено на использование ShadowDOM.
Таким образом стили компонента накладываются только на тэги в компоненте. Что-то там отдельно синхронизировать не нужно.

Comments

[Alexey]

Спасибо за ответ!

Answer 2

[Шохрух Шаймардонов]

Ну вам и не надо это делать. Раз ангуляр собирает и подставляет динамические классы/ид тегам, то он и соберет стили для них. В данном случае используется css-in-js, который и дает возможность генерить крякозябры(названия классов). А если хотите задать элементу стиль с css-файла, то просто добавьте в хтмл соответственный класс вручную(ну по канонам ангуляр, естественно)

Comments

[Alexey]

Извините, но ничего не понял из Вашего ответа.
Причем тут "Раз ангуляр собирает и подставляет динамические классы/ид тегам.."
Он ведь это не умеет делать "из коробки".

[Alexey]

Насколько я понимаю это должно осуществляться на уровне webpack-а

[Шохрух Шаймардонов]

Alexey, да. Я об этом имел ввиду. Простите, видимо подустал.