آموزش Lifecycle Hooks در انگولار ۲

آموزش Lifecycle Hooks در انگولار ۲

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

برنامه انگولار ۲ مجموعه کاملی از فرایندها را طی می کند یا از شروع تا پایان برنامه دارای چرخه حیات است.

نمودار زیر کل فرایندهای چرخه عمر برنامه انگولار ۲ را نشان می دهد.

در زیر شرح هر قلاب چرخه زندگی است.

ngOnChanges – هنگامی که مقدار یک ویژگی داده محدود می شود ، این روش نامیده می شود.

ngOnInit-هر زمان که مقداردهی اولیه دستورالعمل/جزء پس از اولین نمایش انگولار برای اولین بار از ویژگی های محدود به داده رخ می دهد، نامیده می شود.

• ngDoCheck – این برای تشخیص و اعمال تغییرات است که انگولار به تنهایی نمی تواند یا نمی تواند تشخیص دهد.
• ngAfterContentInit – بعد از اینکه انگولار محتوای خارجی را در نمای کامپوننت نمایش داد، در پاسخ فراخوانی می شود.
• ngAfterContentChecked – بعد از اینکه انگولار محتوای پیش بینی شده در کامپوننت را بررسی کرد، در پاسخ فراخوانی می شود.
• ngAfterViewInit – بعد از اینکه انگولار نمایه های کامپوننت و نماهای فرزند را مقداردهی کرد، در پاسخ فراخوانی می شود.
• ngAfterViewChecked – بعد از اینکه انگولار نمای کامپوننت و نمای فرزند را بررسی می کند، در پاسخ فراخوانی می شود.
• ngOnDestroy – این مرحله پاکسازی است درست قبل از اینکه Angular دستورالعمل/جزء را از بین ببرد.

در زیر نمونه ای از پیاده سازی یک Lifecycle Hooks است. در فایل app.component.ts کد زیر را قرار دهید.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

در برنامه فوق، از قلاب چرخه ngOnInit استفاده می کنیم تا مشخص شود که مقدار پارامتر this.values ​​باید روی “Hello” تنظیم شود.

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را رفرش کردید، خروجی زیر را دریافت خواهید کرد.

منبع.

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

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. آموزش نمایش داده ها در انگولار ۲
22. آموزش مدیریت رویدادها در انگولار ۲
23. آموزش تبدیل داده ها در انگولار ۲
24. آموزش Pipe سفارشی در انگولار ۲
25.  آموزش ورودی کاربر در انگولار ۲