Компонентные стили

Приложения Angular имеют стиль стандартного CSS. Это означает, что вы можете применять все, что вы знаете о таблицах стилей CSS, селекторах, правилах и медиа-запросах, непосредственно к приложениям Angular.

Кроме того, Angular может объединять стили компонентов с компоненты, позволяющие получить более модульный дизайн, чем обычные таблицы стилей.

Использование стилей компонентов

Для каждого компонента Angular, который вы пишете, вы можете определить не только шаблон HTML, но и стили CSS, которые идут с этим шаблоном, указав все необходимые селекторы, правила и медиа-запросы.

Один из способов сделать это — установить стили свойство в метаданных компонента. Свойство styles принимает массив строк, содержащих код CSS. Обычно вы даете ему одну строку, как в следующем примере:

  @Component ({selector: 'app-root', template: `

стили CSS в Angular

`, styles: ['h1 {font-weight: normal;}']}) класс экспорта AngularCssComponent {/*. . . */}

Объем стилей

Применяются только стили, указанные в метаданных @Component в шаблоне этого компонента .

Они не наследуются никакими компонентами, вложенными в шаблон, ни каким-либо содержимым, проецируемым в компонент.

Это ограничение области действия является функцией модульности стилей .

  • Вы можете использовать имена классов CSS и селекторы, которые имеют наибольший смысл в контексте каждого компонента.
  • Имена классов и селекторы являются локальными для компонента и не конфликтуют с классами и селекторами, используемыми где-либо еще в приложении.
  • Изменения стилей в другом месте приложения не влияют на стили компонента.
  • Вы можете разместить код CSS каждого компонента вместе с кодом TypeScript и HTML компонента, что приводит к в аккуратную и аккуратную структуру проекта.
  • Вы можете изменить или удалить код CSS компонента, не выполняя поиск по всему приложению, чтобы найдите, где еще используется код.

Загрузка стилей компонентов

Есть несколько способов добавить стили в компонент:

  • путем установки стилей или метаданных styleUrls.
  • Встроенный в шаблон HTML.
  • С помощью CSS импорт.

Стили в метаданных компонента

Вы можете добавить свойство массива стилей в декоратор @Component .

Каждая строка в массиве определяет некоторый CSS для этого компонента.

  @Component ({selector: 'app-root', template:  `

Angular CSS

`, стили: ['h1 {font-weight: normal; } ']}) экспортный класс AngularCssComponent {/*. . . */}

Примечание: эти стили применяются только к этому компоненту. Они не наследуются никакими компонентами, вложенными в шаблон, или каким-либо контентом, проецируемым в компонент..

Команда Angular CLI ng generate component определяет пустой массив стилей при создании компонента с флагом —inline-style.

  `  `` ng generate component hero-app --inline-style``  

Файлы стилей в метаданных компонента

Вы можете загружать стили из внешних файлов CSS, добавив свойство styleUrls в декоратор @Component компонента:

  @Component ({selector: 'app-root',  template: `

Angular CSS Tutus

`, styleUrls: ['./angular-app.component.css'ght})export class AngularCssComponent {/*. . . */}

Примечание: стили в файле стилей применяются только к этому компоненту. Они не наследуются никакими компонентами, вложенными в шаблон, ни каким-либо содержимым, проецируемым в компонент.

Вы можете указать более одного файла стилей или даже комбинацию стилей и styleUrls.

Когда вы используете команду Angular CLI ng generate component без флага —inline-style, она создает для вас пустой файл стилей и ссылается на этот файл в сгенерированных styleUrls компонента.

  `` ng generate component hero-app``  

Встроенные стили шаблона

Вы можете встроить стили CSS непосредственно в шаблон HTML, поместив их в теги .

  @Component ({selector: 'app-hero-controls', template  : ` button {background-color: white; border: 1px solid # 777;}  

Элементы управления

`})

Теги ссылок шаблона

Вы также можете записывать теги в HTML-шаблон компонента .

  @Component ({selector: 'app-hero-team', template: ` 

Команда

  • {{member}}
`})

При сборке с помощью интерфейса командной строки обязательно включите связанный файл стиля среди ресурсов, которые нужно скопировать на сервер, как описано в вики-странице интерфейса командной строки.

После включения интерфейс командной строки будет включать таблицу стилей независимо от того, находится ли URL href тега ссылки относительно корня приложения или файла компонента.

CSS @imports

Вы также можете импортировать файлы CSS в файлы CSS, используя стандартное правило CSS @import. Подробнее см. @Import на сайте MDN.

В этом случае URL-адрес относится к файлу CSS, в который вы импортируете.

 /* Компилятору AOT нужен `./`, чтобы показать, что это локальный */@ import './hero-details-box.css';  

Внешние и глобальные файлы стилей

При сборке с помощью интерфейса командной строки необходимо настроить angular.json для включения всех внешних ресурсов , включая файлы внешнего стиля.

Зарегистрируйте файлы глобальных стилей в разделе стилей, который по умолчанию предварительно настроен с помощью файла global styles.css.

Не- Файлы стилей CSS

Если вы строите с помощью интерфейса командной строки, вы можете писать файлы стилей с помощью sass, less или стилуса и указывать эти файлы в метаданных @ Component.styleUrls с помощью соответствующие расширения (.scss, .less, .styl), как в следующем примере:

  @Component ({selector: 'app-root', templateUrl: './app  .component.html ', styleUrls: [' ./app.component.scss ']})  

Процесс сборки CLI запускает соответствующий препроцессор CSS.

При создании файла компонента с помощью ng generate component интерфейс командной строки по умолчанию генерирует пустой файл стилей CSS (.css). Вы можете настроить CLI по умолчанию на предпочитаемый вами препроцессор CSS, как описано в вики-странице CLI.

Строки стиля, добавленные в массив @ Component.styles , должны быть написаны на CSS , потому что интерфейс командной строки не может применить препроцессор к встроенным стилям.

Оцените статью
nanomode.ru
Добавить комментарий