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. Вам не нужно прислушиваться к проповедям об отказе от использования внутренних стилей или встроенных стилей, поскольку они находятся внутри компонентов и будут ограничены.