تزریق پارام مسیر ایمن در انگولار با دکوراتور

مقدمه و آخرین قسمت این مقاله توسط ChatGPT ارائه شده است که (؟) اولین کسی بود که مقاله را خواند و بازخورد ارائه کرد.

کد نهایی این مقاله در github در دسترس است (زیرا قطعات کد در اینجا اسکرین شات هستند)

تغییر مسیر می تواند عواقب جدی در برنامه های Angular بزرگ داشته باشد و گاهی اوقات باعث ایجاد اثرات موج دار و باگ های پنهان می شود. هنگام کار با پارامترهای مسیر، اطمینان از ایمنی و قابلیت نگهداری در پایگاه کد بسیار مهم است. در این مقاله، ما به تکنیک قدرتمندی خواهیم پرداخت که از قابلیت‌های تایپ اسکریپت و یک دکوراتور سفارشی برای افزایش ایمنی استخراج پارامترهای مسیر در Angular استفاده می‌کند.

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

برای افزایش بیشتر ایمنی، ما یک دکوراتور سفارشی را اجرا می کنیم که از قدرت مشاهده پذیرها استفاده می کند. این دکوراتور به‌طور یکپارچه پارامترهای مسیر را به ویژگی‌ها تزریق می‌کند و از یک رویکرد تمیز و ایمن در سراسر اجزای Angular ما اطمینان می‌دهد.

در پایان این مقاله، درک عمیقی از این تکنیک خواهید داشت و به دانش پیاده سازی تزریق پارامتر مسیر ایمن در پروژه های Angular خود مجهز خواهید شد. بیایید این سفر را برای افزایش ایمنی و قابلیت نگهداری در برنامه های Angular خود آغاز کنیم.

با بررسی آموزش کلاسیک Angular hall of heroes می‌توان یک قطعه کد مربوط به گرفتن شناسه قهرمان از پارامترهای مسیر در جزء جزئیات قهرمان را مشاهده کرد که به شرح زیر است:

با ارائه app-routing.module.ts اطلاعات زیر در مورد مسیرها:

چه نکاتی را می توان در اینجا بهبود بخشید؟ البته اولین مورد، رشته های شل در مسیرها است: هیچ ارتباط صریحی بین :id در مسیر مولفه جزئیات و شناسه گرفته شده از پارامترهای مولفه وجود ندارد. اگر تبدیل به «قهرمان» شود، ممکن است چیزی بی‌صدا بشکند.

بیایید کشف کنیم که چگونه می توان از تایپ اسکریپت برای افزایش ایمنی استخراج پارامترها از مسیر استفاده کرد، بنابراین فقط پارامترهای موجود را می توان استخراج کرد و همچنین، چگونه می توان از دکوراتور برای این منظور استفاده کرد. بنابراین، هدف ما، داشتن heroId$ به عنوان یک Observable است که از طریق دکوراتور به جزء جزئیات قهرمان تزریق می شود.

از آنجایی که دکوراتور یک تابع است، دسترسی آن به Router یا ActivatedRoute کمی مشکل است، با این حال، این امکان وجود دارد: اگر از APP_INITIALIZER برای ارسال آن ارجاعات به دکوراتور ما استفاده شود، این کار می تواند این کار را انجام دهد. با این حال، مشکلی در این رویکرد وجود دارد، زیرا دکوراتورهای دارایی قبل از APP_INITIALIZER شلیک می کنند، به این معنی که ما قبل از اینکه بتوانیم آنها را دریافت کنیم، به منابع نیاز داریم. برای مقابله با این، ما به چیزی نیاز داریم که بتواند فوراً برای اشتراک در دسترس باشد و به عنوان کانالی برای ارسال پارامترهای url عمل کند، بنابراین ما به یک BehaviorSubject نیاز داریم که برای پخش پارامترها از روتر استفاده می‌شود، که بعداً با APP_INITIALIZER تزریق می‌شود. قطعه کد زیر را در نظر بگیرید:

اکنون یک کانال پخش داریم که می‌توانیم از آن در داخل یک تابع استفاده کنیم، حتی قبل از اینکه شروع به دریافت رویدادها از روتر کند، فقط باید عملکرد دکوراتور خود را در این فایل نگه داریم تا به آن دسترسی داشته باشد.

زمان آن رسیده است که برخی از تایپ‌اسکریپت‌های کونگ فو، یک کلی برای استخراج پارامترها از یک رشته بنویسیم، می‌دانیم که مسیرها نمی‌توانند با یک اسلش رو به جلو شروع شوند و قبل از پارامترها یک ستون وجود دارد، بنابراین یک کلی برای استخراج آنها به صورت زیر است:

مانند یک طلسم عمل می کند، اکنون ما هوشمندی در کنار خود داریم:

مورد بعدی این است که رشته های آزاد را با همخوان ها عوض کنید و به جای آن از آنها در مسیرها استفاده کنید:

آنچه در حال حاضر باقی مانده است نوشتن یک تابع ساده دکوراتور برای انجام تزریق param به یک ویژگی است که از params$ BehaviorSubject که قبلا ایجاد شده بود دریافت می کند:

ویولا، اکنون یک دکوراتور ایمن برای تزریق پارامتر داریم که می‌توان از آن در مولفه جزئیات قهرمان به شرح زیر استفاده کرد:

ساده است، اینطور نیست؟

با این دانش جدید، اکنون این اختیار را دارید که برنامه های Angular خود را به ارتفاعات جدیدی از ایمنی و قابلیت نگهداری ببرید. کد نویسی مبارک!