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

  • دوشنبه ۲۱ مرداد ۱۳۹۸
  • بازدید ۱۶۱ نفر

angular7 event binding 6612 تصویر

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

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

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

فایل app.component.html:

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

تابعی که در کد فوق از آن استفاده کردیم، در فایل زیر تعریف شده است:

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

angular7 event binding 6612 1 تصویر

استایل اضافه شده برای دکمه در فایل app.comonent.css:

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

محتوای فایل app.component.html:

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

حال اگر برنامه اجرا کنید، هنگام انتخاب یک گزینه از لیست پیام Changed month from the Dropdown در کنسول چاپ خواهد شد.

خروجی برنامه:

angular7 event binding 6612 2 تصویر

شما می توانید با تغییر محتویات تابع changemonths به شکل زیر هنگام تغییر گزینه انتخاب شده، یک alert به کاربر نمایش دهید:

خروجی برنامه بعد از تغییر:

angular7 event binding 6612 3 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است