هر برنامه از یک نوع مؤلفه ساخته شده است – دکمه ها، ورودی ها، بازشوها و غیره، و پنجره های مدال در این لیست قرار دارند. دلیل آن ساده است – ویندوزهای مودال به ما امکان می دهند با کاربر ارتباط برقرار کنیم و تا زمانی که یک رابط کاربری به اطلاعات اضافی نیاز پیدا نکند، آن را غرق نمی کنیم. در این مقاله، یکی از روش‌های مدیریت پنجره‌های مدال در برنامه‌های Angular را بررسی می‌کنم.
\
:::info ما در نمونه های مقاله از کتابخانه priming برای مدال ها استفاده می کنیم. مورد شما می تواند متفاوت باشد. ایده کلی با وجود کتابخانه ها یکسان خواهد بود، اما API می تواند متفاوت باشد. از آن آگاه باشید.
:::
\ پنجره های مدال فقط اجزای معمولی هستند – دارای نشانه گذاری، سبک و انتخابگر هستند. اما برخلاف اجزای معمولی، معمولاً نباید فوراً در صفحه نشان داده شوند. ما آنها را فقط برای نتیجه اقدامات کاربران – تأیید، دور انداختن، پر کردن یک فرم و غیره – نیاز داریم. بیایید یک مثال را ببینیم:
\
public openModal(): void {
const modalComponent = async (): Promise = import('./path-to-your-modal');
this.modalService.open(modalComponent());
}
\ در اینجا، ما رویکرد واردات پویا را داریم. این بدان معناست که هنگامی که ما آن را فراخوانی می کنیم، کامپوننت ما بارگذاری می شود openModal روش. کاملا مفید است…