От автора: довольно просто обрабатываются в Angular 2 события, такие как click или любые другие. События запускаются на html-странице и отправляются в класс Angular JS для дальнейшей обработки.
Давайте рассмотрим пример обработки события. В нашем примере мы рассмотрим отображение кнопки click и свойства status. Первоначально для свойства status будет установлено значение true. Оно может изменяться на false.
Шаг 1 – Измените следующим образом код в файле app.component.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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, который является файлом шаблона.
|
1 2 3 4 |
<div> {{Status}} <button (click) = "clicked()">Click</button> </div> |
В приведенном выше коде необходимо отметить следующее.
Сначала мы просто отображаем значение свойства Status нашего класса.
Затем определяем html-тег button для которого value равно Click. Затем мы обеспечиваем, чтобы событие Click запускало событие clicked в нашем классе.
Шаг 3 — Сохраните все изменения в коде и обновите страницу браузера, вы получите следующий результат.
Шаг 4 — Нажмите кнопку «Click», вы получите следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
