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

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

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

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

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

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

@Component({
  selector: 'app-root',
  template: `
    <h1>CSS styles in Angular</h1>
  `,
  styles: ['h1 {font-weight: normal;}']
})
export class AngularCssComponent {
/* . . . */
}

Стиль рамки

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

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

Это ограничение объема является модульным элементом стиля .

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

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

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

• Устанавливая стили или метаданные styleUrls.
• Встроенный в шаблон HTML.
• С CSS-импортом.

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

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

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular CSS</h1>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class AngularCssComponent {
/* . . . */
}

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

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

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

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

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular CSS Tutus</h1>
  `,
  styleUrls: ['./angular-app.component.css']
})
export class AngularCssComponent {
/* . . . */
}

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

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

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

```ng generate component hero-app```

Шаблонные встроенные стили

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

@Component({
  selector: 'app-hero-controls',
  template: `
    <style>
      button {
        background-color: white;
        border: 1px solid #777;
      }
    </style>
    <h3>Controls</h3>
    <button (click)="activate()">Activate</button>
  `
})

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

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

@Component({
  selector: 'app-hero-team',
  template: `
    <link rel="stylesheet" href="../assets/hero-team.component.css">
   <h3>Team</h3>
  <ul>
      <li *ngFor="let member of hero.team">
        {{member}}
      </li>
    </ul>`
})

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

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

CSS @imports

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

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

/* The AOT compiler needs the `./` to show that this is local */
@import './hero-details-box.css';

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

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

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

Файлы стилей без CSS

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

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

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

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

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

Предыдущий: Обзор хуков жизненного цикла компонентов
Далее: Динамические Компоненты