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

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

От автора: довольно просто обрабатываются в 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

В приведенном выше коде необходимо отметить следующее.

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

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

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

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

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

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree