Angular 2 — Обработка событий

В Angular 2 такие события, как нажатие кнопки или любой другой вид событий, также могут быть обработаны очень легко. События запускаются со страницы html и отправляются в класс Angular JS для дальнейшей обработки.

Давайте посмотрим на пример того, как мы можем достичь обработки событий. В нашем примере мы рассмотрим отображение кнопки щелчка и свойства статуса. Первоначально свойство status будет иметь значение true. При нажатии кнопки свойство status станет ложным.

Шаг 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, которая будет вызываться при каждом нажатии нашей кнопки на html-странице. В функции мы меняем значение свойства Status с true на false.

Мы определяем переменную с именем status типа Boolean, которая изначально имеет значение true.

Далее мы определяем функцию clicked, которая будет вызываться при каждом нажатии нашей кнопки на html-странице. В функции мы меняем значение свойства Status с true на false.

Шаг 2. Внесите следующие изменения в файл app / app.component.html, который является файлом шаблона.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div> 

Следующие пункты должны быть отмечены в отношении приведенного выше кода.

• Сначала мы просто отображаем значение свойства Status нашего класса.

• Затем определяем html-тег кнопки со значением Click. Затем мы гарантируем, что событие нажатия кнопки будет вызвано событием clicked в нашем классе.

Сначала мы просто отображаем значение свойства Status нашего класса.

Затем определяем html-тег кнопки со значением Click. Затем мы гарантируем, что событие нажатия кнопки будет вызвано событием clicked в нашем классе.

Шаг 3 — Сохраните все изменения кода и обновите браузер, вы получите следующий вывод.

Шаг 4 — Нажмите кнопку Click, вы получите следующий вывод.