استفاده از Router Resolver در انگولار ۱۶

به بهانه از رده خارج شدن کلاس Resolve در انگولار ۱۶ و تصمیم به حذفش در انگولار ۱۷، در این مقاله میخوایم راجع به Router Resolver ها صحبت کنیم. اول میخوایم ببینیم Router‌‌ Resolver ها چی هستند. بعد ببینیم چطوری ازشون استفاده میکنیم. و بعد ببینیم مدل پیاده سازی جدیدشون چجوریه تا برای اپ مون در انگولار ۱۷ مشکلی پیش نیاد.بخش اول: Router Resolver ها چی هستند؟فرض کنید زمانی رو که در یک route انگولار، یک شناسه به عنوان پارامتر مسیریابی ارسال میشه و قراره کامپوننت از اون شناسه استفاده کنه و دیتا یا آبجکت مربوط به اون پارامتر رو بگیره و ازش استفاده کنه.یک روش معمول که در انگولار استفاده میکنیم و احتمالا باهاش آشنایی دارید، اینه که در ngOnInit یا constructor کامپوننت ، شناسه رو از router میگیریم و سعی میکنیم دیتای مربوط بهش رو دریافت کنیم. تا رسیدن دیتا میتونیم از مقدار اولیه undefined ( یا یک مقدار پیش فرض دیگه ) استفاده کنیم و همه جا داخل تمپلت به کمک ngIf های مختلف ، لود شدن دیتای مورد نیازمون رو بررسی کنیم. همچنین میتونیم تا زمانی که دیتا لود نشده از loading استفاده کنیم و وقتی دیتا لود شد، تمپلت اصلی رو نشون کاربر بدیم.مثال زیر یک نمونه از پیاده سازی همین روش هست:محتوای کامپوننتمحتوای تمپلتاما Resolver ها شرایط رو جور دیگه ای رقم میزنند.فیچر Router Resolver در مسیریابی انگولار ( Angular Routing ) با این هدف استفاده میشه که به صورت synchronous دیتای مورد نیاز کامپوننت رو بر اساس پارامترهای مسیریابی بگیره و قبل از اینکه instance کامپوننت ساخته بشه، دیتا رو آماده داشته باشه.در این روش، Resolver پروسه Routing رو تا زمانی که دیتا لود بشه نگه میداره و بعد از اینکه دیتا گرفته شد، پروسه routing رو ادامه میده.بریم ببینیم Router Resolver چطوری این کار رو انجام میده.بخش دوم: دریافت دیتای مورد نیاز کامپوننت با استفاده از Router Resolverدر قدم اول یک کلاس Resolver تعریف میکنیم:کلاس Resolver در انگولار ۱۶ و به قبلدر این کلاس می بینیم که در سرویس HeroService یک تابع تعریف شده به نام getHero که به عنوان ورودی یک مقدار شناسه رو میگیره و به عنوان خروجی آبجکت Hero رو برمیگردونه.داخل تابع resolve، پارامتر ورودی مسیریابی (id) از route.paramMap گرفته میشه، به تابع getHero از سرویس HeroService پاس داده میشه و آبجکت Hero مورد نیاز رو برمیگردونه. ممکنه این آبجکت رو از API دریافت کنه و برگردونه یا از دیتای موجود در اپ برگردونه. شرایط برگردوندن آبجکت، داخل سرویس پیاده سازی شده و ما اطلاعی ازش نداریم. به هر حال تا زمانی که دیتا برنگرده، پروسه تغییر مسیر اپ در وضعیت انتظار باقی می مونه.نکته: دلیل اینکه کلاس Resolve توسط محیط برنامه نویسی خط خورده، اینه که در انگولار ۱۶ این فیچر deprecate شده و در نسخه بعدی قراره حذف بشه. در بخش انتهایی مقاله به توضیح این موضوع و راه حلش میرسیم.در قدم دوم و بعد از تعریف کلاس Resolver ، داخل تنظیمات Routes از این کلاس استفاده میکنیم:تنظیمات Routes در ماژول مسیریابی اپلیکیشندیتای hero توسط Resolver دریافت میشه و زمانی که کامپوننت ساخته میشه این دیتا عملا وجود داره. پس بلافاصله توسط کامپوننت دریافت و استفاده میشه:محتوای کامپوننت بعد از Resolverدر واقع پروسه استفاده از پارامتر های مسیریابی و دریافت دیتا از کامپوننت برداشته شده و در Resolver پیاده سازی میشه.اما پروسه پیاده سازی لودینگ هم به صورت زیر در app.component.ts میتونه پیاده بشه و کاری به کامپوننت ها نداشته باشه:محتوای app.component.tsتا اینجا دلیل استفاده از Resolver رو متوجه شدیم:روتر بجای ارسال پارامترهای مسیریابی به کامپوننت، پارامترها رو در یک کلاس مجزا از نوع Resolver دریافت میکنه و دیتاهای لازم برای کامپوننت رو پیش از ساخته شدن instance کامپوننت آماده میکنه.کامپوننت بجای اینکه درگیر دریافت پارامترهای مسیریابی و به کارگیری شون بشه، تنها به استفاده از دیتا و نمایشش میپردازه.حالا بریم مشکل خذف شدن Resolver رو در انگولار ۱۷ به بعد حل کنیم.بخش سوم: تبدیل RouteResolver در انگولار ۱۶ به ResolveFnبا توجه به اینکه RouteResolver در انگولار ۱۶ deprecate شده و در انگولار ۱۷ به طور کامل حذف خواهد شد، بهتره مدل تعریف جدیدش رو توسط ResolveFn ببینیم.نکته اینه که ResolveFn از جنس تابع معرفی شده و مثل Resolver کلاس نیست. بنابر این عملا داریم یک تابع با interface مشخص رو تعریف میکنیم. پس باید خودمون به کمک inject ، یک instance از سرویس مربوطه ( مثلا HeroService در کد پایین ) رو به تابع معرفی کنیم.حالا با توجه به این توضیحات بالا، مثال زیر رو مرور کنیم:تعریف Resolver با استفاده از ResolveFnخلاصه کلامدو روش برای دریافت پارامترهای routing و استفاده از اون ها رو مرور کردیم.با Router Resolver آشنا شدیم و یک نمونه پیاده سازی شده رو دیدیم.کلاس های Resolver مون رو برای ارتقا به نسخه های بعدی انگولار آماده کردیم.موفق باشید :)