Что такое интерполяция в шаблонах (например, {{ value }})?angular-22

Что такое интерполяция?

Интерполяция в Angular — это синтаксис для отображения компонентных данных в шаблоне с помощью двойных фигурных скобок: {{ expression }}. Это один из основных способов односторонней привязки данных (one-way data binding) от компонента к представлению.

Пример базовой интерполяции:

<p>Welcome, {{ username }}!</p>

Как работает интерполяция?

  1. Механизм выполнения:

    • Angular автоматически обнаруживает интерполяционные выражения при компиляции шаблона
    • Создается специальная привязка свойства (property binding)
    • Выражение внутри {{ }} вычисляется в контексте компонента

  2. Процесс обновления:

    • При каждом запуске механизма обнаружения изменений (change detection)
    • Angular пересчитывает выражение
    • Обновляет DOM, если значение изменилось

Что можно использовать внутри {{ }}

1. Свойства компонента

<div>Current count: {{ counter }}</div>

2. Вызов методов

<div>Total: {{ calculateTotal() }}</div>

Важно: Метод будет вызываться при каждой проверке изменений, что может повлиять на производительность.

3. Простые выражения

<div>Sum: {{ a + b }}</div>
<div>Flag is {{ flag ? 'on' : 'off' }}</div>

4. Геттеры

<div>Full name: {{ fullName }}</div>

get fullName() {
  return `${this.firstName} ${this.lastName}`;
}

Ограничения интерполяции

  1. Нельзя использовать:

    • Операторы присваивания (=, += и т.д.)
    • Ключевые слова (new, typeof, instanceof и др.)
    • Цепочки выражений через ; или ,
    • Глобальные переменные (window, document)

  2. Сложные выражения лучше выносить в методы компонента: ❌ Плохо:

    {{ user.orders.length > 0 ? 'Active' : 'Inactive' }}

    ✅ Лучше:

    {{ userStatus }}

    get userStatus() {
  return this.user.orders.length > 0 ? 'Active' : 'Inactive';
}

Эквивалент property binding

Интерполяция — это синтаксический сахар для привязки к свойству textContent:

<!-- Эти две записи эквивалентны -->
<p>{{ title }}</p>
<p [textContent]="title"></p>

Безопасность и санитизация

Angular автоматически санитизирует интерполированные значения для предотвращения XSS-атак:

this.unsafeHtml = '<script>alert("XSS")</script>';

<!-- Безопасно - отобразится как текст -->
<div>{{ unsafeHtml }}</div>

Производительность

  1. Интерполяция создает binding в системе обнаружения изменений
  2. Для статических значений лучше использовать атрибут textContent: 
    <!-- Для статического контента -->
<div textContent="Static value"></div>

<!-- Для динамического -->
<div>{{ dynamicValue }}</div>

Резюмируем

  1. Интерполяция — это синтаксис {{ expression }} для отображения данных в шаблоне
  2. Основные возможности:
    • Отображение свойств компонента
    • Простые выражения
    • Вызов методов (с осторожностью)
  3. Особенности:
    • Автоматическая санитизация
    • Односторонняя привязка (компонент → шаблон)
    • Эквивалентна привязке к textContent
  4. Лучшие практики:
    • Избегайте сложной логики в шаблоне
    • Для статических значений используйте атрибуты
    • Выносите сложные выражения в методы компонента

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

Вопросы

Собеседования