Компоненты¶
Одним из ключевых элементов приложения являются компоненты. Компонент управляет отображением представления на экране.
Так, при создании первого приложения в прошлой главе был определен следующий компонент:
import { Component } from '@angular/core'
@Component({
selector: 'my-app',
template: `
<label>Введите имя:</label>
<input [(ngModel)]="name" placeholder="name" />
<h1>Добро пожаловать {{ name }}!</h1>
`,
})
export class AppComponent {
name: ''
}
Сам класс компонента здесь относительно небольшой:
export class AppComponent {
name: ''
}
Чтобы класс мог использоваться в других модулях, он определяется с ключевым словом export
. В самом же классе определена лишь одна переменная, которая в качестве значения хранит некоторую строку.
Для создания компонента необходимо импортировать функцию декоратора @Component
из библиотеки @angular/core
. Декоратор @Component
позволяет идентифицировать класс как компонент.
Если бы мы не применили декоратор @Component
к классу AppComponent
, то класс AppComponent
компонентом бы не считался.
Декоратор @Component
в качестве параметра принимает объект с конфигурацией, которая указывает фреймворку, как работать с компонентом и его представлением.
С помощью свойства template
шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.
Каждый компонент должен иметь один шаблон. Однако необязательно определять шаблон напрямую с помощью свойства template
. Можно вынести шаблон во внешний файл с разметкой html, а для его подключения использовать свойство templateUrl
.
Шаблон может быть однострочным или многострочным. Если шаблон многострочный, то он заключается в косые кавычки (`), которые стоит отличать от стандартных ординарных кавычек ('
).
Также в примере выше устанавливается свойство selector
, которое определяет селектор CSS. В элемент с этим селектором Angular будет добавлять представление компонента. Например, в примере выше селектор имеет значение my-app
. Соответственно если html-страница содержит элемент <my-app></my-app>
, например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello Angular 5</title>
</head>
<body>
<my-app>Загрузка...</my-app>
<script src="public/polyfills.js"></script>
<script src="public/app.js"></script>
</body>
</html>
То именно этот элемент будет использоваться для рендеринга представления компонента.