[MUSIC]
في أول وحدة استعرضنا التوجيهات لفترة وجيزة
وننظر إلى التوجيهات الهيكلية.
لقد رأينا كيف تمكننا التوجيهات الهيكلية من تصميم النماذج.
لمكوناتنا الزاوي.
في هذا الدرس، سنقوم بمراجعة توجيهات السمات.
النوع الثالث من التوجيه
وسوف ننظر أيضا في كيفية تصميم توجيه مخصص
في التمرين الذي يتبع هذه المحاضرة.
لذا وكما أدركنا، فإن التوجيهات هي طريقة
لتصميم كل من القوالب الزاوي وتمكيننا من القيام
بأجزاء مختلفة من معالجة السد مع وجهات نظر تطبيقات R Angular.
لذلك، رأينا استخدام التوجيهات لإعطاء تعليمات للتكرار الزاوي
وكيفية تقديم القوالب في DOM.
وقد تعلمنا بالفعل أنه ضمن تطبيق Angular،
يتيح لنا استخدام التوجيهات الهيكلية في القوالب تصميم
وجهات نظرنا حول تطبيق Angular الخاص بنا. و
علمنا أيضا أن العنصر الذي استخدمناه على نطاق و
اسع في مختلف التدريبات في هذه الدورة.
إنه نوع خاص من التوجيه يحتوي على قالب أو عرض مرتبط به.
وعلمنا أيضا في وقت سابق أن
هناك نوعان آخران من التوجيهات التي يمكننا استخدامها في قوالب لدينا.
التوجيهات الهيكلية والصفات التوجيهات.
نظرنا إلى بعض التوجيهات الهيكلية المضمنة في
الوحدة الأولى من هذه الدورة.
ورأينا كيف يمكننا استخدام التوجيهات الهيكلية مثل NG4 أو NGF
وأكثر في تلك التدريبات في الأجزاء السابقة من هذه الدورة.
الآن سنلقي نظرة على النوع الآخر من التوجيه، توجيه السمة.
ما هو توجيه السمة
وكيف يساعدنا عند تصميم تطبيق Angular الخاص بنا.
إذن ما هي توجيهات السمة؟
يتم استخدام توجيهات السمة كسمات للعناصر في القالب الخاص بك.
لذا تمامًا مثل أن لديك شفرة HTML الخاصة بك التي تكتبها داخل
القالب وعناصر HTML، يمكنك تطبيق توجيه سمة
على عناصر HTML هذه.
رأينا أيضا التوجيه الهيكلي للمستخدم.
ورأينا المكونات يمكن أن تضيف نفسها
عناصر إضافية مثل هتمل التي يمكن استخدامها داخل قوالب التطبيق الزاوي الخاص بك.
لذا فإن الطريقة التي نستخدم بها المكونات مع محدداتها
كانت إحدى الطرق التي استخدمناها التوجيهات داخل تطبيقنا Angular.
عندما رأينا استخدام التوجيهات الهيكلية التي تم تطبيقها
على عناصر HTML المختلفة داخل القالب لدينا.
الآن ننظر إلى توجيهات السمة التي تمكننا من تغيير
خصائص معينة لعناصر HTML لدينا.
فما هو استخدام توجيهات السمة؟
تستمع توجيهات السمات إلى سلوك عناصر HTML أو
سمات أو خصائص أو مكونات أخرى تستخدمها داخل القوالب وتعديلها.
لقد استخدمنا بالفعل بعض
توجيهات السمات المضمنة بالفعل دون التحدث عنها بشكل صريح.
الحديث عن توجيهات السمات المضمنة التي تأتي كجزء من
إطار العمل الزاوي الخاص بك.
لقد واجهت بالفعل نموذج Ng في بعض الدروس السابقة
في هذه الدورة، وتحديدًا في منطقة ربط البيانات
وأيضًا عندما درسنا الخطوط في الوحدة السابقة.
هناك نوعان آخران من توجيهات السمات المضمنة التي
قد نواجهها هي ngClass و ngStyle.
بالاسم نفسه يمكنك تخمين ما هو الغرض منها.
وبالمثل، هناك بعض الوحدات الأخرى التي تستخدمها داخل
تطبيقات Angular الخاصة بك مثل FormsModule وكذلك RouterModule التي تحتوي على
مجموعة خاصة بها من توجيهات السمات المضمنة التي نستخدمها.
في الواقع، لقد استخدمنا بالفعل عندما نحدد النماذج
وأيضا استخدام جهاز التوجيه داخل تطبيق Angular الخاص بنا في وقت سابق.
الآن، في هذه المرحلة، قد تتساءل، كيف أذهب نحو إنشاء
توجيه السمة الخاص بي إذا كنت مهتمًا بإنشاء توجيه مخصص، لذلك
هذا هو المكان الذي سننظر فيه في كيفية اشتقاق توجيه مخصص.
دعونا استكشاف التوجيهات المخصصة في الشريحة التالية لفترة وجيزة
وفي التمرين الذي يلي.
لذا في التوجيهات المخصصة توقعك هو أنك ستتمكن من تنفيذ
ما تهتم به. على
وجه الخصوص، لذلك هذا هو المكان الذي يمكننا إنشاء توجيهاتنا المخصصة الخاصة.
باستخدام CLI Angular، يمكنك إزالة رمز العظام العارية للتوجيه
ثم تعديل هذا الرمز من أجل تنفيذ التوجيه المخصص الخاص بك.
لذلك عند تنفيذ توجيه مخصص باستخدام Angular CLI،
ستقوم بإنشاء توجيه لك.
وبعد ذلك ستلاحظ على الفور أنه ضمن التوجيه،
ستستخدم
فئة الديكور المزخرفة هذه من أجل تحويل الفصل إلى توجيه
وسنواجه واحدًا من هذا القبيل في التمرين التالي.
بالإضافة إلى ذلك، مع المدير، خاصة عندما تستخدم توجيهات السمات
وتريد تعديل أي من العناصر المستخدمة داخل القوالب الخاصة بك.
فئة أخرى مفيدة بالنسبة لنا تسمى ElementRef.
هذا مهم أيضًا من الكود الزاوي، ويتم حقنه في
مُنشئ التوجيهات الخاص بك، وكتب فئة التوجيه الخاصة بك.
ثم يتيح لك هذا الوصول إلى عناصر DOM
ثم إجراء تعديلات عليها.
لذلك مع هذا الفهم السريع لكيفية إنشاء توجيهات مخصصة،
دعونا ننظر إلى مثال في التمرين الذي يتبع هذه المحاضرة.
[ موسيقى]