Компоненты¶

Одним из ключевых элементов приложения являются компоненты. Компонент управляет отображением представления на экране.

Так, при создании первого приложения в прошлой главе был определен следующий компонент:

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>

То именно этот элемент будет использоваться для рендеринга представления компонента.