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

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

От автора: довольно просто обрабатываются в Angular 2 события, такие как click или любые другие. События запускаются на html-странице и отправляются в класс Angular JS для дальнейшей обработки.

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

Шаг 1 – Измените следующим образом код в файле app.component.ts.

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

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

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

Примечание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree