Что такое шаблонные выражения в Angular?
Шаблонные выражения (template statements) в Angular — это конструкции, которые позволяют вам связывать события, происходящие в DOM, с методами компонентов. Они пишутся непосредственно в HTML-шаблонах и часто используются для обработки событий, таких как нажатие кнопки или ввод данных в текстовое поле.
Основные характеристики шаблонных выражений:
<button (click)="onClick()">Нажми меня!</button>
В этом примере, когда кнопка будет нажата, сработает метод
onClick() компонента.Пример использования шаблонных выражений
Вот простой пример, который демонстрирует использование шаблонных выражений в Angular:
Шаг 1: Создаем компонент
Сначала создаем компонент с именем AppComponent:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Добро пожаловать в Angular!</h1>
<button (click)="onClick()">Нажми меня!</button>
<p>{{ message }}</p>
`
})
export class AppComponent {
message: string = '';
onClick() {
this.message = 'Кнопка была нажата!';
}
}
Шаг 2: Описание кода
@Component, который содержит selector, template и другие свойства.onClick: Этот метод изменяет значение свойства message, которое отображается в параграфе.Запуск приложения
ng new my-angular-app
cd my-angular-app
app.component.ts на приведенный выше код.ng serve
http://localhost:4200. Вы должны увидеть кнопку и заголовок. При нажатии на кнопку текст под заголовком изменится.Заключение
Шаблонные выражения — это мощный инструмент, который позволяет связывать события пользовательского интерфейса с логикой приложения. Они делают код более понятным и интуитивно понятным, позволяя разработчикам легко взаимодействовать с DOM и управлять состоянием приложения.