Стили и шаблоны компонента

Последнее обновление: 12.11.2023

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

Для установки стилей в директиве @Component определено свойство styles:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    template: `<h1>Hello Angular</h1>
			<p>Приложение Angular состоит из компонентов</p>`,
	styles: [` 
			h1, h2{color:navy;}
			p{font-size:13px; font-family:Verdana;}
	`]
})
export class AppComponent { }

Параметр styles содержит набор стилей, которые будут использоваться компонентом:

Стили в компонентах в Angular 17

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

<body>
    <my-app>Loading...</my-app>
	<h2>Подзаголовок</h2>
</body>

Если бы заголовок h2 здесь располагался бы в шаблоне компонента, то к нему применялся бы стиль. А так он не будет стилизован:

Стилизация в Angular 17

Стоит отметить, что начиная с версии 17 нам необязательно заключать стили в массив, как в примере выше:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    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",
    standalone: true,
    template: `<h1>Hello Angular</h1>
             <p>Приложение Angular состоит из компонентов</p>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {}

Параметр styleUrls позволяет указать набор файлов css, которые применяются для стилизации. В данном случае предполагается, что файл css располагается в проекте в папке app.

Стили и шаблоны компонента в Angular

Похожим образом мы можем вынести шаблон в отдельный файл html. Также в папке app создадим новый файл app.component.html со следующим кодом:

<h1>Hello Angular</h1>
<p>Приложение Angular состоит из компонентов</p>

То есть здесь определен весь тот же код, что ранее был в шаблоне компонента. И теперь изменим сам компонент:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent { }

Таким образом, за счет выноса кода css и html код самого компонента стал чище и проще.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850