Что такое интерполяция в Angular?
Интерполяция в Angular - это способ привязки данных, позволяющий вставлять значения переменных из компонента в шаблон.
Для использования интерполяции в Angular используется двойные фигурные скобки {{}}
. Внутри этих скобок вы можете поместить выражение, которое будет вычислено и заменено на соответствующее значение.
Шаги по использованию интерполяции в Angular:
Шаг 1: Определение переменной в компоненте
В компоненте определите переменную, значение которой вы хотите отобразить в шаблоне. Например, у нас есть компонент AppComponent
с переменной name
:
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
template: ` <h1>Welcome, {{ name }}!</h1> `
})
export class AppComponent {
name = 'John'
}
Шаг 2: Использование интерполяции в шаблоне
В шаблоне компонента используйте интерполяцию с помощью двойных фигурных скобок {{}}
. Разместите выражение или переменную, которую вы хотите отобразить. В примере мы используем интерполяцию для отображения значения переменной name
:
<h1>Welcome, {{ name }}!</h1>
При рендеринге компонента Angular вычислит значение выражения внутри интерполяции и заменит его соответствующим значением переменной. В итоге, на странице будет отображаться текст "Welcome, John!".
Вы также можете использовать интерполяцию для отображения результатов вычисления методов или свойств компонента:
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
template: `
<p>The sum of 2 and 3 is {{ 2 + 3 }}</p>
<p>The current date is {{ currentDate }}</p>
`
})
export class AppComponent {
currentDate = new Date()
}
В данном примере мы используем интерполяцию для отображения суммы чисел и текущей даты.
Интерполяция в Angular позволяет вставлять значения переменных и результаты вычислений в шаблоне компонента. Это удобный и часто используемый способ связывания данных в Angular.