في التمرين السابق، رأينا استخدام أول توجيه هيكلي لدينا،
NGFor.
دعونا نسأل أنفسنا بعض الأسئلة حول التوجيهات الهيكلية
ومعرفة كيف تكون مفيدة عندما نكتب تطبيقاتنا الزاوي.
التوجيهات الهيكلية هي نوع واحد من التوجيهات.
لذا فإن التوجيهات هي مظلة عامة تحتوي على مكونات،
ثم لديك توجيهات هيكلية، ثم لديك توجيهات سمة.
لذلك دعونا نتعلم أكثر قليلا عن التوجيهات.
لذلك ما ندركه هو أن القوالب الزاوي ديناميكية، لذلك يجب أن
يتم إنشاؤها على الطاير، سيكون هناك الكثير من التلاعب الذي يجب القيام به على DOM.
لذا، ما تساعدنا التوجيهات هو تمكيننا من إعطاء تعليمات
إلى Angular حول كيفية تقديم القوالب إلى DOM.
لذا، يستخدمون التوجيهات لإعطاء التعليمات
إلى Angular لأنه يعرض القوالب على الشاشة.
لذلك، بشكل عام، يمكن تعريف التوجيه مباشرة في Angular باستخدام
فئة مع ديكور @Directive.
ونحن نرى أيضا مثالا على التوجيه الذي يمكننا أنفسنا
خلق قليلا في وقت لاحق في هذه الدورة.
في الوقت الحالي، سنلقي نظرة على توجيهات البناء.
وعلى وجه الخصوص،
واجهنا بالفعل نوعنا الأول من التوجيه، وهو مكون.
المكون هو نوع خاص من التوجيه و
Angular، والذي يحتوي على قالب خاص به مرتبط به.
وقد رأينا بالفعل كيف يمكننا الاستفادة من عنصر لتحديد
أجزاء من تخطيطنا لشاشة التطبيق لدينا.
كما ذكرت، هناك نوعان آخران من التوجيهات في توجيهات Angular
والهيكلية والسمة.
سوف ندرس بسرعة التوجيهات الهيكلية في هذا الدرس.
وبعد ذلك سوف ننظر في توجيهات السمة قليلا في وقت لاحق في
هذه الدورة.
فما هي التوجيهات الهيكلية وكيف تكون مفيدة لنا؟
ما ندركه ونحن نستخدم التوجيهات الهيكلية هو،
أنها تساعدنا على تغيير تخطيط المحتوى لدينا من
خلال مساعدتنا على إضافة وإزالة عناصر من DOM. على
وجه الخصوص، لاحظ استخدام المصطلح إضافة
وإزالة واستبدال العناصر في DOM.
لذلك أنت تستخدم حرفيا التوجيهات الهيكلية للتعامل مع
DOM الخاص بك من صفحة الويب الخاصة بك.
لذلك، يمكنك استخدام التوجيهات الهيكلية عن طريق تطبيقها على عنصر مضيف،
عادة div أو عنصر قائمة في DOM وأيضا إلى أحفاده.
لقد رأينا بالفعل المستخدم،
التوجيه الهيكلي ngFor، في التمرين السابق.
ورأينا كيف نستخدم NgFor لحلقة من خلال مجموعة من الأطباق،
ومن ثم تخطيط كل واحد منهم لبناء القائمة لمطعمنا.
هنا، سوف أذكر بإيجاز بعض التوجيهات الهيكلية المشتركة التي
ستواجهها أثناء كتابة القسم الزاوي الخاص بك.
واحدة من التوجيهات الهيكلية الأكثر شيوعا التي ستراها هو
توجيه NGiF.
عند استخدامه في بناء جملة القالب الخاص بك، ستكتبه كـ * ngif،
لذلك هذه هي الطريقة التي يتم بها استخدام هذا التوجيه في DOM الخاص بك.
لذلك، على سبيل المثال، إذا قمت بتطبيق توجيه NGiF على div مثل
هذا في هذا المثال، ما تحدده هو أنه
إذا لم يكن selectedDish فارغًا، فسيتم إضافة هذا div إلى DOM.
إذا كان هذا SelectedDish فارغًا،
فلن يتم إضافة هذا div، مهما كان موجودًا في هذا div إلى DOM، لذلك
تقوم بإزالة هذا حرفيًا من DOM إذا تبين أن القيمة خاطئة.
إذا اتضح أن يكون صحيحا، ثم يتم إضافته في تفريغ.
وبالمثل، رأينا استخدام التوجيه ngFor.
لذلك، حيث حددنا، على سبيل المثال، لMD-قائمة البند في
التمرين السابق قلنا * ngFor وقال، دعونا طبق من الأطباق.
لذلك هذا يسمح لنا بالتكرار على مجموعة من الأطباق
التي تم تعريفها في معطف البرنامج النصي الخاص بنا.
توجيه هيكلي آخر قد يجد استخدامًا شائعًا هو توجيه ngSwitch.
على الرغم من أنني ليس لدي مثال الآن، في
وقت لاحق في هذه الدورة سوف نواجه استخدام التوجيه نغسويتش.
يسمح لك هذا بإضافة عناصر معينة إلى DOM بشكل انتقائي
عن طريق تحديد شرط، اعتمادًا على ما يتم تقييم الشرط إليه،
ثم ستستخدم أحد هذه العناصر بين القائمة.
إذا كنت معتادًا على بيان التبديل من C ++ أو Java،
فإن ngSwitch يبدو مألوفًا جدًا لك.
لذلك سوف تتصرف على غرار بيان التبديل الذي كنت
تستخدم ل من جافا أو C ++.
مع المناقشة القصيرة حول التوجيهات الهيكلية،
دعونا ننتقل إلى التمرين التالي حيث سنواصل دراسة المكونات.
[ موسيقى]