Учебники

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 – Сохраните все изменения кода и обновите браузер, вы получите следующий вывод.

Нажмите True

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