آموزش مدیریت رویدادها در انگولار ۲

آموزش مدیریت رویدادها در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مدیریت رویدادها در انگولار ۲ خواهیم پرداخت.

در انگولار ۲ رویدادهایی مانند کلیک روی دکمه یا هر نوع رویداد دیگری نیز به راحتی قابل مدیریت است. رویدادها از صفحه html شروع شده و برای پردازش بیشتر به کلاس Angular JS ارسال می شوند.

بیایید به نمونه ای از نحوه دستیابی به مدیریت رویداد نگاه کنیم. در مثال ما، نمایش دکمه کلیک و ویژگی وضعیت را بررسی می کنیم. در ابتدا، ویژگی وضعیت درست خواهد بود. وقتی روی دکمه کلیک می شود، ویژگی وضعیت نادرست می شود.

مرحله ۱ – کد فایل 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 تعریف می کنیم که در ابتدا درست است.
• بعد ما تابع کلیک شده را تعریف می کنیم که هر زمان که دکمه ما در صفحه html ما کلیک شود، فراخوانی می شود. در تابع  مقدار ویژگی Status را از true به false تغییر می دهیم.

مرحله ۲ – تغییرات زیر را در فایل app/app.component.html ، که فایل الگو است ، اعمال کنید.

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

نکات زیر باید در مورد کد بالا ذکر شود.

• ما ابتدا مقدار ویژگی Status کلاس خود را نمایش می دهیم.
• سپس تگ html دکمه را با مقدار Click تعریف می کنیم. سپس اطمینان می دهیم که رویداد کلیک دکمه در رویداد کلیک شده در کلاس ما فعال می شود.

مرحله ۳ – تمام تغییرات کد را ذخیره کرده و مرورگر را تازه کنید ، خروجی زیر را دریافت خواهید کرد.

مرحله ۴ – روی دکمه Click کلیک کنید، خروجی زیر را دریافت خواهید کرد.

منبع.

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲
15. آموزش ناوبری در انگولار ۲
16. آموزش فرم ها در انگولار ۲
17. آموزش CLI در انگولار ۲
18. آموزش تزریق وابستگی در انگولار ۲
19. آموزش پیکربندی پیشرفته در انگولار ۲
20. آموزش کنترل های شخص ثالث در انگولار ۲
21. آموزش نمایش داده ها در انگولار ۲