Основы Angular

Компоненты

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

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

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

import { Component } from "@angular/core";
import {FormsModule} from '@angular/forms';
	
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    template: `<label>Введите имя:</label>
				 <input [(ngModel)]="name" placeholder="name">
				 <h1>Добро пожаловать {{name}}!</h1>`
})
export class AppComponent { 
	name= '';
}

Чтобы класс мог использоваться в других модулях и компонентах, он определяется с ключевым словом export. В самом же классе определена лишь одна переменная, которая в качестве значения хранит некоторую строку.

Для создания компонента необходимо импортировать функцию декоратора @Component из библиотеки @angular/core. Декоратор @Component позволяет идентифицировать класс как компонент.

Если бы мы не применили декоратор @Component к классу AppComponent, то класс AppComponent компонентом бы не считался.

Декоратор @Component в качестве параметра принимает объект с конфигурацией, которая указывает фреймворку, как работать с компонентом и его представлением. Класс компонент принимает множество параметров, который можно посмотреть в документации. Большая часть этих параметров так или иначе рассматривается в дальнейших статьях, поэтому в данном случае рассмотрим только те, которые использованы в коде выше:

  • selector: определяет селектор CSS. В элемент с этим селектором Angular будет добавлять представление компонента. Например, в примере выше селектор имеет значение my-app. Соответственно html-страница приложения должна содержать элемент <my-app></my-app>. И именно этот элемент будет использоваться для рендеринга представления компонента.

  • standalone: указывает, будет ли компонент автономным. При значении true компонент является автономным. По умолчанию значение false (компонент не автономный). Далее мы чуть подробнее рассмотрим различие между автономными и неавтономными компонентами.

  • imports: указывает набор модулей, которые надо импортировать. Если компонент использует какие-то модули, то эти модули можно здесь указать. Так, в примере выше в коде компонента определено текстовое поле ввода. И для работы с полями ввода и элементами формы предназначен специальный модуль - FormsModule. И компонент AppComponent его импортирует.

  • template: шаблон или визуальная часть компонента. Шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.

    Каждый компонент должен иметь один шаблон. Однако необязательно определять шаблон напрямую с помощью свойства template. Можно вынести шаблон во внешний файл с разметкой html, а для его подключения использовать свойство templateUrl.

    Шаблон может быть однострочным или многострочным. Если шаблон многострочный, то он заключается в косые кавычки (`), которые стоит отличать от стандартных ординарных кавычек (').

Автономные компоненты

В версии 14 фреймворка Angular была предложена концепция автономных компонентов (standalone components). С версии 16 эта концепция вышла из бета и перешла в состояние релиза. Автономные компоненты Angular отличаются тем, что они могут не быть частью модулей, то есть они автономны и могут использоваться сами по себе. При определении таких компонентов применяется свойство standalone:true декоратора Component.

Такие компоненты сами управляют своими зависимости через свойство imports в декораторе Component. Кроме того, автономные компоненты могут импортироваться в другие автономные компоненты.

Стоит отметить, что команда разработчиков фреймворка Angular для разработки новых приложений при использовании версии 16 и выше рекомендует использовать именно автономные компоненты. Соответственно в дальнейшем мы также будем руководствоваться этим подходом. Однако также посмотрим на альтернативных подход с использованием модулей и неавтономных компонентов.

Загрузка компонентов

Вне зависимости от того, сколько у нас компонентов, один из них является главным, и он, в свою очередь, загружает все остальные компоненты. Фреймворк Angular позволяет напрямую загружать главный компонент.

Например, возьмем проект с базовой структурой:

Загрузка компонентов Angular на веб-страницу

В папку src/app в файле app.component.ts определим простенький компонент:

import { Component } from "@angular/core";
     
@Component({
    selector: "my-app",
    standalone: true,
    template: "<h1>Hello METANIT.COM</h1>"
})
export class AppComponent {}

Здесь пустой класс AppComponent, для которого определен только селектор - "my-app" и шаблон в виде заголовка. На веб-странице index.html определим элемент my-app:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello METANIT.COM</title>
</head>
<body>
    <my-app>Загрузка...</my-app>
</body>
</html>

Для загрузки главного и единственно компонента в файле main.ts используем следующий код:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent).catch(e => console.error(e));

Для загрузки компонента AppComponent применяется bootstrapApplication API. Так, первой строкой в файле из модуля "angular/platform-browser" импортируется функция bootstrapApplication(). Второй строкой импортируется главный компонент AppComponent.

Затем вызов bootstrapApplication(AppComponent) запускает экземпляр приложения Angular и отображает автономный компонент в качестве корневого компонента приложения.

Процесс загрузки компонента на веб-страницу и bootstrapApplication

После построения и запуска приложения на нужный элемент на веб-странице будет загружен компонент, который передан в bootstrapApplication():

Загрузка компонента на веб-страницу и bootstrapApplication

Стоит отметить, что эта функция возвращает объект промис - Promise<ApplicationRef>. Из этого можно получить объект ApplicationRef, который и представляет собственно приложение Angular.

const appRef: ApplicationRef = await bootstrapApplication(AppComponent);
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850