Компоненты¶

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

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

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>

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

Компоненты¶

Комментарии