Від автора: досить просто обробляються в Angular 2 події, такі як click або будь-які інші. Події запускаються на html-сторінці і відправляються в клас Angular JS для подальшої обробки.
Давайте розглянемо приклад обробки події. У нашому прикладі ми розглянемо відображення кнопки click і властивості status. Спочатку для властивості status буде встановлено значення true. Воно може змінюватися на false.
Крок 1 – Змініть наступним чином-код у файлі app.component.ts.
import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
templateUrl: ‘app/app.component.html’
})
export class AppComponent {
Status: boolean = true;
clicked(event) {
this.Status = false;
}
}
Примітка:
Ми оголошуємо змінну з ім’ям status, яка має тип Boolean, спочатку для неї встановлено значення true.
Потім ми визначаємо функцію clicked, яка буде викликатися при натисканні на кнопку. У функції ми змінюємо значення властивості Status з true на false.
Крок 2. Внесіть наступні зміни в файл app/app.component.html, який є файлом шаблону.
Click
У наведеному вище коді необхідно зазначити наступне.
Спочатку ми просто відображаємо значення властивості Status нашого класу.
Потім визначаємо html-тег button для якого value одно Click. Потім ми забезпечуємо, щоб подія Click запускало подія clicked в нашому класі.
Крок 3 — Збережіть всі зміни в коді і оновіть сторінку браузера, ви отримаєте наступний результат.
Крок 4 — Натисніть кнопку «Click», ви отримаєте наступний результат.
