نکات و ترفندهای کامپوننت های انگولار | به زبان ساده

در این مقاله برخی نکات و ترفندهای کامپوننت های انگولار را معرفی می‌کنیم که کمک می‌کنند تا بتوانید این کامپوننت‌ها را به روش بهینه‌تر و ساده‌تری توسعه دهید. در این راهنما یک کامپوننت بازشدنی (drop-down) سفارشی به عنوان مثال توسعه می‌دهیم که از هر دو روش تک‌انتخابی و چند انتخابی پشتیبانی می‌کند.

کار خود را با آماده‌سازی دو کامپوننت کلیدی آغاز می‌کنیم. در ابتدا به دو کامپوننت dato-select و dato-option نیاز داریم.

فایل dato-option.component.ts

فایل dato-select.component.ts

نکته اول

از آنجا که کامپوننت بازشدنی ما از روش چند انتخابی نیز پشتیبانی می‌کند، باید یک چکمارک اضافه کنیم که نشان دهد آیا یک گزینه انتخاب شده است یا نه.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

یک روش برای انجام این کار از طریق افزودن یک متد از نوع input()‎ و نمایش یا پنهان کردن mrkup بر اساس مقدار آن است:

البته کد فوق کار می‌کند، اما عیب این رویکرد آن است که برای هر گزینه یک بررسی بیشتر به انگولار اضافه می‌کنیم و از این رو زمانی که یک کامپوننت بازشدنی دارای 10،000 گزینه باشد، باید 10،000 بررسی اضافه کنیم و این تنها یک ngIf است، در حالی که این کار معمولاً توسط ngClass ،ngStyle و غیره انجام می‌یابد.

در این مورد خاص عملکرد کامپوننت برای ما حائز اهمیت بالایی است و از این رو تصمیم می‌گیریم که multi-option را به کامپوننت دیگری ببریم که از single-option ارث‌بری می‌کند تا از بررسی‌های تکراری جلوگیری کنیم.

ضمناً هنوز بخش‌هایی از markup وجود دارند که در هر دو بخش تک‌انتخابی و چند انتخابی مشترک هستند و از این رو از تنظیمات تمپلیت برای حفظ اصل DRY در کد بهره می‌گیریم.

کامپوننت تک‌گزینه‌ای

کامپوننت چندگزینه‌ای

نکته دوم

تغییر قبلی که در کد ایجاد کردیم، مشکل جدید را ایجاد کرد. فرض کنید می‌خواهیم از کامپوننت بازشدنی multi-select استفاده کنیم:

این کد کار نخواهد کرد، زیرا دکوارتور ContentChildren به دنبال DatoOptionComponent می‌گردد. اگر بخواهیم یک ارجاع به کامپوننت‌های option-multi داشته باشیم، باید یک کوئری ContentChildren اضافه کنیم:

اما اکنون باید هر دو را حفظ کنیم. خوشبختانه می‌توانیم این مشکل را به روشی بهتر با کمک Angular DI حل کنیم:

بدین ترتیب به انگولار اعلام می‌کنیم که وقتی به DatoOptionComponent نیاز دارد از DatoOptionMultiComponent استفاده کند.

نکته سوم

ما همچنان راضی نشده‌ایم و می‌خواهیم از همان سلکتور dato-option برای هر دو کامپوننت‌های بازشدنی تک‌گزینه‌ای و چند‌گزینه‌ای استفاده کنیم. بنابراین سلکتور multi-option را طوری تغییر می‌دهیم که یکسان باشند:

اما اکنون یک مشکل داریم. انگولار به ما امکان نمی‌دهد که سلکتورها را تکرار کنیم و خطایی به صورت زیر صادر می‌کند:

More than one component matched on this element.
Make sure that only one component’s selector can match a given element.

ترجمه باکس بالا:

«بیش از یک کامپوننت با این عنصر تطبیق یافته‌اند.»

«مطمئن شوید که تنها سلکتور یک کامپوننت می‌تواند با عنصر مفروض تطبیق یابد.»

روش ما برای حل این مشکل از طریق بهره‌گیری از این واقعیت است که انگولار از سلکتور CSS به نام:not پشتیبانی می‌کند.

فایل کامپوننت تک‌گزینه‌ای

فایل کامپوننت چندگزینه‌ای

اکنون می‌توانیم از همان سلکتور استفاده کرده و زمانی که به multi-option نیاز باشد، یک خصوصیت اضافه کنیم. این روش بسیار مناسب‌تر از تعریف یک سلکتور کاملاً جدید است.

نکته چهارم

کامپوننت بازشدنی یک کادر جستجو نیز دارد که به صورت پیش‌فرض جستجوی داخلی انجام می‌دهد و ما به یک گزینه برای اجرای جستجوی سمت سرور هم نیاز داریم. یک روش برای نیل به این مقصود این است که یک متد input()‎ و یک متد output()‎ ایجاد کنیم:

اما به این ترتیب حس می‌شود که ورودی تکراری است و می‌توانستیم از آن اجتناب کنیم. به این منظور باید بدانیم که آیا فردی منتظر رویداد search است یا نه و بر اساس آن تصمیم بگیریم که جستجوی داخلی را فعال کنیم یا نه.

به این ترتیب هر event emitter یک لیست از observer-های خود نگهداری می‌کند. اگر دست کم بک observer داشته باشیم، به این معنی است که فردی مشترک شده است.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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