Шаблоны компонентов

Шаблоны компонентов в Angular служат основой для определения структуры и отображения интерфейса пользователя. Они представляют собой HTML-файлы, в которых Angular добавляет функциональность с помощью привязки данных, директив и различных механизмов управления отображением. В этой главе рассматриваются основные особенности шаблонов, способы их использования и интеграция с логикой компонента.

Шаблон компонента — это HTML-разметка, к которой добавляется динамическое содержимое, привязанное к данным и состоянию приложения. Шаблон может содержать стандартный HTML, а также Angular-специфичные конструкции для работы с данными и событиями. Шаблон может быть связан с компонентом через аннотацию @Component в его метаданных:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html', // ссылка на HTML-шаблон
  styleUrls: ['./example.component.css']  // стили компонента
})
export class ExampleComponent {
  title: string = 'Angular Template Example';
}

Привязка данных

Одной из основных возможностей шаблонов Angular является привязка данных. Привязка позволяет отображать значения из компонента в шаблоне и отправлять события из шаблона в компонент.

Привязка в одну сторону

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

{{ title }}

Здесь title — это свойство компонента, которое будет отображаться в HTML-шаблоне.

Привязка атрибутов с помощью квадратных скобок позволяет передавать данные в атрибуты HTML-элементов:

Image

В этом примере значение свойства imageUrl компонента будет передано в атрибут src тега img.

Двусторонняя привязка

Двусторонняя привязка используется для синхронизации данных между компонентом и шаблоном. Это достигается с помощью директивы ngModel, которая используется в основном для формы ввода данных.



Hello, {{ username }}!

В этом примере любое изменение в поле ввода будет сразу отражаться в свойстве username компонента и наоборот.

Директивы

Директивы Angular — это мощный инструмент для управления отображением элементов DOM в зависимости от данных. Директивы могут быть структурными или атрибутными.

Структурные директивы

Структурные директивы изменяют структуру DOM, добавляя или удаляя элементы. Одна из самых распространенных директив — *ngIf. Она позволяет условно отображать элементы.

This will be shown if isVisible is true

Директива *ngFor используется для итерации по массиву и отображения элементов:

    
  
  • {{ item }}
    •

Атрибутные директивы

Атрибутные директивы изменяют поведение элементов, не изменяя их структуры. Например, директива ngClass позволяет динамически изменять классы элементов.

Content

Здесь класс active будет добавлен к элементу, если свойство isActive компонента истинно.

Пайпы

Пайпы (или фильтры) используются для трансформации данных перед их отображением в шаблоне. В Angular существует несколько встроенных пайпов, таких как date, currency, uppercase, и другие.

Пример использования пайпа для форматирования даты:

{{ currentDate | date:'short' }}

Этот код отобразит текущую дату в формате “день/месяц/год”.

Можно также создавать свои собственные пайпы для специфичных преобразований данных. Для этого необходимо создать класс, реализующий интерфейс PipeTransform.

События

Шаблоны могут обрабатывать события, такие как клики, ввод с клавиатуры и другие. Для этого используется синтаксис круглых скобок ().

Метод onClick() будет вызван при клике на кнопку. В нем можно обработать логику для события.

Контекст шаблона

Шаблон компонента имеет доступ ко всем свойствам и методам компонента, однако иногда требуется доступ к более сложным данным или логике. В таких случаях можно использовать директивы, такие как ngIf или ngFor, для работы с локальными переменными.


  
Hello, {{ currentUser.name }}!

Здесь создается локальная переменная currentUser, которая ссылается на объект user из компонента.

Вложенные компоненты

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

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

Ленивая загрузка шаблонов

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

Для этого используется динамическая загрузка с помощью директивы ng-template и API для загрузки компонентов.


  
Lazy Loaded Content

При клике на кнопку будет загружен и отображен блок с контентом, определенный в ng-template.

Локализация шаблонов

Для работы с многоязычными приложениями Angular предоставляет механизмы локализации, включая перевод текста и форматирование данных в зависимости от региона. Локализация достигается с помощью использования пайпов и внешних библиотек, таких как @angular/localize.

{{ 'HELLO' | translate }}

В этом примере используется пайп translate для отображения текста на нужном языке.

Заключение

Шаблоны в Angular — это мощный инструмент для создания динамичных интерфейсов, который позволяет легко привязывать данные, управлять отображением элементов, а также обрабатывать события. Использование директив, пайпов, ленивая загрузка и компоненты — все эти функции вместе делают шаблоны гибкими и мощными средствами для построения пользовательских интерфейсов.

Оглавление