الزاوي: الميزات غير الواضحة لمحددات التوجيه

إذا قمت بإنشاء توجيهات Angular ، فربما تكون قد استخدمت بنية تستخدم الأقواس كمحدد: ([]) . مثل هذا النهج ، على الرغم من أنه يتم تطبيقه في أغلب الأحيان ، ليس الوحيد الممكن. في الواقع ، فإن المحددات المستخدمة في التوجيهات تعطي المبرمج مجالًا واسعًا للإبداع. من أجل توضيح هذه الفكرة عمليًا ، تناقش المادة التي ننشر ترجمتها اليوم منهجية إنشاء توجيه مصمم للعمل مع الروابط الخارجية الموجودة في النموذج. على وجه الخصوص ، سنتحدث عن كيف يمكنك العثور على عناصر HTML العادية ، وإذا لزم الأمر ، قم باستبعاد بعضها من التحديد باستخدام :not pseudo- :not .

توجيه NgForm

للنظر في مثال محدد محدد ، ألق نظرة على توجيه ngForm :

 @Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', }) 

هنا يجدر الانتباه إلى ما يلي:

• يمكن تصميم التوجيه لعدة محددات ، والتي يمكن إدراجها بفاصلة.
• يمكنك هنا مزج عناصر هدف HTML (مثل <form> ) مع سمات HTML (مثل ngForm ).
• لاستبعاد بعض العناصر من التحديد ، يمكنك استخدام :not pseudo- :not .

إنشاء توجيه للعمل مع الروابط الخارجية

نقصد بالرابط الخارجي علامة <a> ، التي لا تحتوي على توجيه routerLink . بالنظر إلى ما اكتشفناه من خلال تحليل المثال السابق ، يمكن وصف المحدد المقابل على النحو التالي:

 @Directive({ selector: 'a:not([routerLink])', }) 

جمال هذا المحدد هو أننا لسنا بحاجة إلى إنشاء اسم سمة لشيء يمكن وصفه بأنه عكس بعض الكيانات.

يمكننا ، من أجل تسليط الضوء على الروابط الخارجية ، استخدام شيء ما مثل التوجيه باسم externalLink ، ولكن هذا غير ضروري تمامًا ، حيث أن هذا النهج يترجم إلى تكرار الآليات الموجودة. بالإضافة إلى ذلك ، من السهل نسيان إضافة توجيه مشابه لبعض الروابط الخارجية. تتمثل قوة طريقتنا في أنه بفضل خط واحد ، يمكننا الوصول إلى جميع الروابط الخارجية.

يجب أن تبدو نتائج تطبيق التوجيه على الروابط الخارجية كما يلي:

• يجب فتح الرابط في نافذة منفصلة.
• يجب إضافة سمة rel إلى الارتباط ، مما سيؤدي إلى تحسين الأداء وزيادة أمان الحل.

يمكن تحقيق هذين الهدفين من خلال استخدام @HostBinding() :

 @Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; } 

يرجى ملاحظة أننا هنا ، من بين أمور أخرى ، قمنا بتزيين العقارات باستخدام الديكور @Input() ، والذي ، إذا لزم الأمر ، يفتح إمكانيات إعادة تعريفه.

قد يكون تطبيق آخر صالح لهذا الحل هو استخدام الديكور @Attribute() . سيعطي هذا النهج زيادة طفيفة في الأداء ، لأنه على عكس الديكور @Input() ، عند استخدام @Attribute() يتم حساب قيم الخصائص المقابلة مرة واحدة فقط ، أي أنه لا يتم التحقق من خصائص rel target باستمرار في دورة فحص التغيير.

يمكن العثور على تفاصيل حول هذه التقنية هنا .

توجيه الاختبار

لنقم بإنشاء كتلة تنقل بسيطة تحتوي على روابط تؤدي إلى موارد خارجية:

 <nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav> 

إذا شاهدت ، باستخدام أدوات مطور Chrome ، رمز HTML المطابق ، يمكنك مشاهدة ما يلي:


كود HTML لكتلة التنقل بعد تطبيق التوجيه

هذا هو بالضبط ما نحتاجه. يعمل التوجيه دون الحاجة إلى محددات سمات إضافية.

الملخص

من هذه المادة ، تعلمت أنه عند العمل مع التوجيهات الزاويّة ، ليس من الضروري استخدام محددات السمات. قمنا هنا أولاً بفحص توجيه ngForm ، ثم استخدمنا المعرفة التي اكتسبناها لإنشاء ngForm الخاص المصمم للعمل مع الروابط الخارجية. نأمل أن تجد هذه التقنية مفيدة.

أعزائي القراء! إذا كنت على علم بأي تقنيات غير واضحة لتطوير مشاريع الويب باستخدام Angular ، فالرجاء إخبارنا بها.