Angular 2 основан на компонентах, что означает, что каждая функциональность пользовательского интерфейса построена как компонент. Поэтому, поскольку стиль на основе компонентов является рекомендуемым шаблоном, Angular 2 собирается сделать написание стилей довольно приятным занятием. Мы обсудим различные методы стилизации и способы их использования, но перед этим нам необходимо понять концепцию Shadow DOM и View Encapsulation.

Shadow DOM в основном позволяет скрыть группу реализаций DOM внутри одного элемента (что является основной идеей компонентов) и инкапсулировать стили в элемент.

Настройка инкапсуляции довольно проста и выполняется прямо внутри декоратора @component:

@Component({
  templateUrl: 'card.html',
  styles: [`
    .card {
      height: 70px;
      width: 100px;
    }
  `],
  encapsulation: ViewEncapsulation.Native
  // encapsulation: ViewEncapsulation.None
  // encapsulation: ViewEncapsulation.Emulated is default 
})

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

Этот метод является наиболее очевидным методом стилизации в Angular 2. Это потому, что он рекомендуется, имеет смысл с учетом концепции компонентов и встречается повсюду в документации Angular 2. Это реализовано в декораторе @Component нашего класса компонента следующим образом:

@Component({
  templateUrl: 'card.html',
  styles: [`
    .card {
      height: 70px;
      width: 100px;
    }
  `],
})

Ожидаемое поведение при различных методах инкапсуляции представлений:

  • Нет: стиль заключен в тег style и помещен в head
  • Эмуляция: стиль заключен в тег style, помещен в head и уникально идентифицируется, чтобы его можно было сопоставить с шаблоном компонента. При этом стили будут использоваться только для шаблона в том же компоненте.
  • Собственный: ведет себя так, как ожидалось от веб-компонентов.

Внешние таблицы стилей

@Component({
  styleUrls: ['css/style.css'],
  templateUrl: 'card.html',
})

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

Этого можно достичь двумя способами:

1) Стили можно заключить в тег style и поместить перед шаблонами:

@Component({
  template: `
    <style>
    h1 {
      color: purple;
    }
    </style>
    <h1>Styling Angular Components</h1>
    `
})

2) Стиль можно записать как обычные встроенные стили в тегах шаблона:

@Component({
  template: '<h1 style="color:pink">Styling Angular Components</h1>'
})

Ожидаемое поведение при различных методах инкапсуляции представлений:

  • Нет: для метода 1 стиль заключен в тег style и помещен в head. Он добавляется сразу после встроенного и внешнего стилей компонента. Для метода 2 стиль просто остается в теге.
  • Эмуляция: для метода 1 стиль заключен в тег style, помещен в head и однозначно идентифицируется, чтобы его можно было сопоставить с шаблоном компонента, как и встроенный стиль компонента. Для метода 2 стиль по-прежнему остается в теге.
  • Собственный: ведет себя так, как ожидалось от веб-компонентов.

Заключение

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