خانه / برنامه نویسی / اتصال رویداد (Event Binding) در انگولار ۶ – آموزش Angular 6

اتصال رویداد (Event Binding) در انگولار ۶ – آموزش Angular 6

angular 6 event binding 5608 تصویر

اتصال رویداد (Event Binding) در انگولار ۶

در این به بخش با مبحث اتصال رویداد (Event Binding) و چگونگی کار کرد آن در انگولار ۶ آشنا خواهیم. زمانی که کاربر در حال استفاده از یک برنامه است، حرکت دادن ماوس، کلیک کردن، فشار دادن صفحه کلید و غیره همگی باعث رخ دادن رویدادهای مختلف می شوند. اکثر اوقات لازم است تا این رویداد ها را برای انجام برخی از کار ها هندل کنیم. این همان جایی است که ما می توانیم از Event Binding استفاده کنیم.

برای درک بهتر و راحت تر موضوع اتصال رویداد مثال زیر را در نظر بگیرد.

فایل app.component.html:

در کد فوق ما یک دکمه تعریف کردیم و سپس یک تابع برای هندل کردن رویداد کلیک به آن اضافه کردیم. در زیر بخش مربوط به افزودن تابع برای رویداد کلیک را مشاهده می کنید:

تابعی که در بالا از آن استفاده کردیم، در فایل app.component.ts تعریف شده است.

زمانی که کاربر بر روی دکمه کلیک کند، کنترل اجرای برنامه تابع myClickFunction را فراخوانی می کند. این تابع یک پنجره alert با محتوای “Button is clicked” را به کاربر نمایش داده و سپس event را در کنسول می نویسد.

angular 6 event binding 5608 1 تصویر

حال مانند نمونه زیر یک رویداد change به لیست کشویی موجود در برنامه اضافه کنید تا زمانی که گزینه انتخاب شده در آن لیست تغییر کرد، فراخوانی شود.

تابع هندلر رویداد change در فایل app.component.ts تعریف شده است:

زمانی که این تابع فراخوانی شود، پیام ” Changed month from the Dropdown” را در کنسول چاپ می کند (برای مشاهده کنسول، در صفحه مرورگر کلیک راست کرده و گزینه Inspect Element را انتخاب کنید. سپس به تب Console بروید).

angular 6 event binding 5608 2 تصویر

تابع changemonths به شکل زیر تغییر دهید تا زمانی که ماه انتخاب شده تغییر کرد، فقط یک پیام را در صفحه مرورگر نمایش دهید.

خروجی:

angular 6 event binding 5608 3 تصویر


لينک منبع

درباره ی admin

همچنین ببینید

بررسی دقیق پروتکل ICMP – گیت

شبکه های مدرن، بزرگتر و پیچیده تر می شوند. در این دوره، شما می توانید …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *