تو این مقاله قراره درباره اینکه چجوری میتونیم یک Component برای Modal درست کنیم و در بخش‌های مختلف App ازش استفاده کنیم صحبت کنیم. قبل از اینکه در مورد چگونگی پیاده‌سازی این Component با هم صحبت کنیم باید بگم که برای داشتن یک Modal در Angular یا هر فریمورک دیگه راه‌های مختلفی وجود داره و ما قراره اینجا یکی از این روش‌ها رو با هم بررسی کنیم.
در این روشی که جلوتر با هم خواهیم دید تقریبا شما تو هر بخشی که اراده کنید میتونید تغییر ایجاد کنید و اینجوری میتونید Modalهای مختلفی در صفحه داشته باشید.
برای شروع بیاید با هم بررسی کنیم که دقیقا به چه Modal نیاز داریم و چه ویژگی‌هایی میخوایم داشته باشه پس به این لیست زیر دقت کنید:
خب برای شروع کار ابتدا بیاید به وسیله AngularCLI با هم دیگه نیازمندی‌های پروژه رو آماده کنیم پس لطفا این چند خط رو در هر مسیری که علاقه داشتید در خط فرمان اجرا کنید تا فایل‌های مورد نیاز ما ساخته باشه.
اولین خط از دستورات بالا یک فولدر به modal برای ما درست میکنه که داخل اون فایل‌های مربوط به کامپوننت ما قرار داره و خب حداقل حاوی یک فایل با پسوند ts هست که عمده تغییرات ما در این بخش قراره اتفاق بیفته، خط دوم دستورات هم یک فایل سرویس برای ما درست میکنه که قراره به وسیله این فایل تو بخش‌های مختلف اپلیکیشن به Modalها دسترسی داشته باشیم.
برای شروع من اول سرویس مربوطه رو مینویسم چون داخل Component اصلی ما ازش استفاده کردیم این سرویس یک سرویس خیلی ساده است که فک نمیکنم نیازی به توضیح داشته باشه یک لیست تعریف شده برای همه‌ی Modalها یک تایع برای اضافه کردن، یک تابع برای حذف کردن، یک تابع برای پیدا کردن و باز کردن و در نهایت یک تابع برای پیدا کردن و بستن Modal مورد نظر داریم که در کد زیر میتونید ببینید:
بعد این اینکه سرویس مورد نظر رو نوشتیم بریم سراغ Component اصلی و باهم دیگه اون رو هم بررسی و کامل کنیم من در ادامه همین بخش کدمربوط بهش رو قرار میدم ولی خب برای توضیح باید بگم که ما تو این Component ابتدا خود Element اصلی رو انتخاب میکنیم و با اضافه کردن کلاس‌های CSS بهش در بخش‌های مختلف Modal مورد نظرمون رو نشون میدیم توابعی هم که من تعریف کردم یک تابع هست در هنگام Init شدن فراخوانی میشه و وظیفه اضافه کردن Modalمارو به لیست موجود داخل Service برعهده داره و در هنگام Destroy شدن هم تابع دیگه فراخوانی میشه تا Modal مورد نظر رو از لیست حذف کنه علاوه بر اون هم دو تا تابع برای نمایش و پنهان کردن Modal داریم که از همون توابع داخل Service استفاده میکنن و در صورت نیاز میتونید داخل فایل HTML خودتون ازش استفاده کردید به جز اینا یک KeyHandler هم من قرار دادم که وقتی مثلا دکمه Esc کیبورد رو فشار بده Modal مورد نظر بسته بشه.
همچنین من هنگام باز شدن Modal ارتفاع صفحه رو هم حساب میکنم که اگه از View خارج شده بود بتونم کلاس مورد نظر خودم رو بهش اضافه کنم. تا توی اون حالت هم مشکلی نداشته باشه.
بعد از این بهتره بریم سراغ فایل HTML که من خیلی راحت در نظرش گرفتم و اصلا چیز پیچیده‌ای نداره و در واقع یک خط بیشتر نیست:
<ng-content></ng-content>
چیزی که من برای ساختاربندی Modalدر نظر گرفتم به این صورت هست که ما تمام بخش محتوای داخل Modal رو در هنگام ساخت یک مدال بتونیم تغییر بدیم به این صورت دیگه نیازی نیست تا برای مثال شما یک ورودی برای Title داشته باشید و اگر جایی نیاز بود استایل‌های اون رو تغییر بدید مجددا از متغیر‌های اضافی در Component استفاده کنید.
اگر با نحوه کلاس گذاری به شیوه BEM در CSS آشنایی داشته باشید خیلی راحتی میتونید با تعریف یک Component در بخش Styleها بدون کدهای اضافی و شلوغ این بخش رو هم مدیریت کنید و هر جایی که نیاز بود کلاس‌های دلخواهتون رو بدون هیچ محدودیتی به Modal اضافه کنید. ما برای نمایش Modalدر این روش فقط کافیه تا با استفاده از کلاس‌ها در هنگام فراخوانی توابع باز و بسته کردن این بخش رو هم مدیریت کنیم.
امیدوارم از این مقاله بتونید استفاده کنید و اگه جایی نیاز به توضیح بیشتر داشتید خیلی خوشحال میشم که برام کامنت بذارید تا در صورت نیاز مقاله رو اصلاح کنم.
اگر در زمینه Angular نیاز به آموزش دیگه‌ای دارید یا موضوعی هست که دوست دارید در موردش بنویسم باز هم برام کامنت بذارید هر موضوعی که وقت و دانشم اجازه بده حتما آماده میکنم و باهاتون به اشتراک میذارم.
