Structural Directives در Angular

دایرکتیو های ساختاری (Structural Directives)

هر توسعه‌دهنده Angular با ngIf و ngFor آشنایی داره! این دایرکتیو ها معمولاً در template ها استفاده می‌شوند. ما به اونها built-in structural directives می گیم. در واقع ngIf بخشی از تمپلیت رو از DOM اضافه یا حذف می کنه، در حالی که ngFor هم همین کار را انجام می ده! اما از یک ورودی تکرارپذیر مانند یک آرایه یا مجموعه استفاده می کنه.

شما می تونید structural directives شخصی خودتون رو ایجاد کنید، این ویژگی حتی زمانی که ngIf، ngFor و ngSwitch با جریان کنترل داخلی جایگزین شده و منسوخ شده اند[RFC]، باقی خواهد ماند. سازوکار structural directives به خودی خود منسوخ نخواهد شد، بنابراین جای نگرانی نیست. در این مقاله، نحوه ایجاد سریع یک مورد ساده از structural directives-conditional ، مشابه ngIf را نشان خواهم داد.

ifHasPermission

بیایید به ساخت دایرکتیو ifHasPermission ادامه دهیم که یک مثال محبوب در مقالات مربوط به دایرکتیو های ساختاری است - که به دلایل آموزشی بسیار مفید است.

اول از همه، یک کلاس پایه تعریف می کنیم و آن را توسعه خواهیم داد. هرچند که من به شخصه طرفدار وراثت در برنامه نویسی نیستم، البته که شما می توانید این کد را تغییر دهید تا به عنوان یک delegate کار کند. با این حال، در این مورد، وراثت کار را برای ما خیلی ساده تر می کند.

در اینجا، اگر شرط درست باشد، الگوی داده شده را در ViewContainer وارد می کنیم. در غیر این صورت، بررسی می کنیم که آیا تمپلیتی برای case else داریم و آن تمپلیت را در ViewContainer قرار می دهیم. اگر شرایط از آخرین call کردن تغییر نکرده باشد، بررسی‌های بیشتری برای جلوگیری از رندر شدن مجدد ViewContainer وجود دارد.

حالا، IfHasPermission :

خیلی کوتاه اینم بگم که فقط با 2 ورودی، فقط چند خط - تمام کارهای کثیف و کدهای کثیف احتمالی به کلاس StructuralConditionalDirective واگذار می شود.

در اینجا شما یک Dependency خارجی دارید: PermissionsService. این به شما بستگی دارد که چگونه آن را پیاده سازی کنید و چگونه بهش بگویید که مجوزها را بررسی کند - می تواند ناهمزمان (با Promises یا Observables) یا همزمان باشد، مانند مثال زیر.

کد ناهمزمان می تواند به شکل زیر باشد:

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

نام ورودی ها باید مطابق قرارداد باشد:

• ورودی، که همان انتخابگر دستورالعمل نامگذاری شده است، باید ورودی را مدیریت کرده و ظرف را اصلاح کند.
• ورودی که به عنوان انتخابگر با پسوند Else نامگذاری شده است، مرجع الگو را دریافت می کند که پس از کلمه کلیدی else در الگو ذکر شده است.

یک مثال کاربردی:

حالا بیایید یک تست برای دستورالعمل خود بنویسیم، و در آن تست، یک مثال کاربردی خواهیم داشت.

TestComponent

در این الگو، ما * را در مقابل انتخابگر دستورالعمل خود داریم - شبیه به ngIf، و به همین دلیل است که Angular منطق دستورالعمل های ساختاری را برای دستورالعمل ما اعمال می کند.

فایل تست کامل را در زیر می تونید ببینید:

دایرکتیو های شما میتونه بسیار پیچیده تر باشه. در اینجا، من نشون داده‌ام که چگونه می تونید از کلاس StructuralConditionalDirective برای ایجاد یک built-in Directive شرطی تنها چند خط کد بزنید و هروقت نیاز داشتید از اون استفاده مجدد کنید.