Стили и шаблоны компонента
Стилизация компонента может производиться как с помощью установки стилей в самом компоненте, так и с помощью подключения внешних css-файлов.
Для установки стилей в директиве @Component определено свойство styles:
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `<h1>Hello Angular</h1>
<p>Приложение Angular состоит из компонентов</p>`,
styles: [`
h1, h2{color:navy;}
p{font-size:13px; font-family:Verdana;}
`]
})
export class AppComponent { }
Параметр styles содержит набор стилей, которые будут использоваться компонентом:
При использовании стилей следует учитывать, что они применяются локально только к разметке, управляемой компонентом. Например, если на странице будут элементы вне области управления компонентом, то к ним уже не будут применяться стили. Например:
<body>
<my-app>Loading...</my-app>
<h2>Подзаголовок</h2>
</body>
Если бы заголовок h2 здесь располагался бы в шаблоне компонента, то к нему применялся бы стиль. А так он не будет стилизован:
Стоит отметить, что начиная с версии 17 нам необязательно заключать стили в массив, как в примере выше:
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `<h1>Hello Angular</h1>
<p>Приложение Angular состоит из компонентов</p>`,
styles:`
h1, h2{color:navy;}
p{font-size:13px; font-family:Verdana;}
`
})
export class AppComponent { }
Селектор :host
Селектор :host ссылается на элемент, в котором хостится компонент. То есть в данном случае это элемент <my-app></my-app>.
И селектор :host как раз позволяет применить стили к этому элементу:
styles: [`
h1, h2{color:navy;}
p{font-size:13px;}
:host {
font-family: Verdana;
color: #555;
}
`]
Подключение внешних файлов
Если стилей много, то код компонента может быть слишком раздут, и в этом случае их вынести в отдельный файл css. Так, создадим в одной папке с классом компонента (который по умолчанию располагается в папке app) новый файл app.component.css со следующим содержимым:
h1, h2{color:navy;}
p{font-size:13px;}
:host {
font-family: Verdana;
color: #555;
}
Затем изменим код компонента:
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `<h1>Hello Angular</h1>
<p>Приложение Angular состоит из компонентов</p>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {}
Параметр styleUrls позволяет указать набор файлов css, которые применяются для стилизации. В данном случае предполагается, что файл css
располагается в проекте в папке app.
Похожим образом мы можем вынести шаблон в отдельный файл html. Также в папке app создадим новый файл app.component.html со следующим кодом:
<h1>Hello Angular</h1> <p>Приложение Angular состоит из компонентов</p>
То есть здесь определен весь тот же код, что ранее был в шаблоне компонента. И теперь изменим сам компонент:
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
Таким образом, за счет выноса кода css и html код самого компонента стал чище и проще.
- Глава 1. Введение в Angular
- Глава 2. Основы Angular
- Глава 3. Директивы
- Глава 4. Сервисы и dependency injection
- Глава 5. Работа с формами
- Глава 6. HTTP и взаимодействие с сервером
- Глава 7. Маршрутизация
- Глава 8. Pipes
- Глава 9. Дополнительные статьи
