در این مقاله قصد دارم درباره یکی از lifecycle های مهم و کاربری در انگولار به نام ngOnChange صحبت کنم.توی برنامه های بزرگ توی انگولار عموما از component های کوچیک استفاده می کنیم، این component ها ممکن در لحظه داده ای دریافت کنن و انعطاف پذیر باشن و با هربار دریافت داده یه واکنشی نشون بدن.برای بروز رسانی داده ها که قرار به component در لخظه بفرستیم و این component به این اطلاعات واکنش نشون بده از ngOnChange استفاده می کنیم.
توی ngOnChange دوتا متغیر نقش اساسی و مهمی بازی میکنن، اول input که وظیفه آوردن داده به داخل component ایفا میکنه و دوم SimpleChanges که مشخص می کنه این داده جدید هستش یا قدیمی که اگه بر همین اساس کار جدید روی داده شروع کنه به طور کلی SimpleChange کلاسی هستش که مقادیر فعلی و قبلی را پیاده سازی می کنه. با توجه به این حرفا به این مثال توجه کنید:
@Input() inputValue: string; ngOnChanges(changes: SimpleChanges) { console.log(changes.inputValue.currentValue); console.log(changes.inputValue.previousValue); }
همین طوری که توی این مثال اومده inputValue مقدار ورودی داده شده به component ما هستش و توی ngOnChange به کمک changes که از نوع SimpleChanges هستش ما اومدیم یه لاگ (در این مقاله من قبلا مفصل درباره انواع متدها console صحبت کردم) از روی مقدار قبلی و بعدی گرفتیم.
متد ngOnChane توی هر بروزرسانی از ویژگی های input فراخوانی می کنه. مزیت دیگه ngOnChanges این هستش که اگر component شما دارای چندینInput باشه ، همه تغییرات یک باره دریافت میکنه.
به پایان این مقاله رسیدیم امیدوارم استفاده کامل ازش برده باشید.
ممنون از توجهتون :)
