Angular 2 — Обробка подій

18

Від автора: досить просто обробляються в 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, який є файлом шаблону.

{{Status}}
Click

У наведеному вище коді необхідно зазначити наступне.

Спочатку ми просто відображаємо значення властивості Status нашого класу.

Потім визначаємо html-тег button для якого value одно Click. Потім ми забезпечуємо, щоб подія Click запускало подія clicked в нашому класі.

Крок 3 — Збережіть всі зміни в коді і оновіть сторінку браузера, ви отримаєте наступний результат.

Angular 2 — Обробка подій

Крок 4 — Натисніть кнопку «Click», ви отримаєте наступний результат.

Angular 2 — Обробка подій