كيفية استخدام التوجيهات الهيكلية في الزاوي؟

ستأخذك هذه المقالة عبر نمط التوجيه الهيكلي في Angular، وستقدم لك ما هو التوجيه الهيكلي وكيفية استخدامه، وآمل أن يكون مفيدًا لك!

مدخل الواجهة الأمامية (vue) إلى دورة الإتقان: أدخل التعلم

في Angular ، هناك نوعان من التوجيهات. تقوم توجيهات السمات بتعديل مظهر أو سلوك عناصر DOM . تقوم التوجيهات الهيكلية بإضافة أو إزالة عناصر DOM .

تعد التوجيهات الهيكلية واحدة من أقوى الميزات في Angular ، ومع ذلك كثيرًا ما يُساء فهمها.

إذا كنت مهتمًا بمعرفة التوجيهات الهيكلية، فلنقرأها ونتعرف على ماهيتها، وفيم يتم استخدامها وكيفية استخدامها في مشاريعك. [البرامج التعليمية الموصى بها: "البرنامج التعليمي الزاوي"]

ما سوف تتعلم

ستتعرف في هذه المقالة على نمط التوجيه الهيكلي Angular . ستعرف ما هي وكيفية استخدامها.

بعد دراسة هذه المقالة، ستفهم هذه التعليمات بشكل أفضل وستستخدمها في مشاريع فعلية.

ما هي التوجيهات الهيكلية الزاوي؟

التوجيهات الهيكلية Angular هي توجيهات يمكنها تغيير بنية DOM . يمكن لهذه التعليمات添加、移除或者替换元素. تحتوي التوجيهات الهيكلية على رمز * قبل اسمها.

في Angular ، هناك ثلاثة توجيهات منظمة قياسية.

• *ngIf - تضمين قالب بشكل مشروط استنادًا إلى القيمة المنطقية التي يتم إرجاعها بواسطة التعبير (أي العرض الشرطي للقالب)

• *ngFor - التكرار عبر المصفوفة

• *ngSwitch - يعرض كل رسم بياني مطابق

فيما يلي مثال على التوجيه المنظم. بناء الجملة يبدو مثل هذا:

 <element ng-if="Condition"></element>

يجب أن تكون العبارات الشرطية true أو false .

 <div *ngIf="worker" class="name">{{worker.name}}</div>

ينشئ Angular عنصر <ng-template> ثم يطبق التوجيه *ngIf . يؤدي هذا إلى تحويلها إلى خاصية ربط بين قوسين مربعين [] ، مثل [ngIf] . يتم إدراج بقية <div> ، بما في ذلك اسم الفئة، في <ng-template> . على سبيل المثال:

 <ng-template [ngIf]="worker">
<div class="name">{{worker.name}}</div>
</ng-قالب>

كيف تعمل التوجيهات الهيكلية الزاوية؟

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

أمثلة على التوجيهات الهيكلية

دعونا نضيف بعض تعليمات HTML البرمجية البسيطة.

محتوى الملف app.component.html كما يلي:

 <div style="text-align:center">
<ح1>
مرحباً
</h1>
</div>
<h2> <التطبيق-الرسوم التوضيحية></التطبيق-الرسوم التوضيحية></h2>

كيفية استخدام التوجيه *ngIf

نستخدم *ngIf لتحديد ما إذا كان سيتم عرض عنصر أو إزالته بناءً على الشروط. ngIf يشبه إلى حد كبير if-else .

يقوم التوجيه *ngIf بإزالة عناصر HTML عندما يكون التعبير false . عندما يكون true ، ستتم إضافة نسخة من العنصر إلى DOM .

رمز *ngIf الكامل هو كما يلي:

 <ح1>
	<button (click)="toggleOn =!toggleOn">الرسم التوضيحي ng-if</button>
</h1>
<div *ngIf="!toggleOn">
<h2>مرحبا </h2>
<p>صباح الخير لك، انقر فوق الزر للعرض</p>
</div>
<ساعة>
<p>اليوم هو يوم الاثنين وهذا عنصر نصي وهمي ليجعلك تشعر بالتحسن</p>
<p>فهم توجيه ngIf مع جملة else</p>

كيفية استخدام *ngFor التوجيه

نحن نستخدم التوجيه *ngFor للتكرار على المصفوفة. على سبيل المثال:

 <ul>

<li *ngFor="let wok of العمال">{{ wok }}</li>

</ul>

ملف TypeScript المكون لدينا:

 استيراد { Component، OnInit } من '@angular/core'؛

@عنصر({
المحدد: "الرسوم التوضيحية للتطبيق"،
templateUrl: './illustrations.component.html'،
styleUrls: ['./illustrations.component.css']
})
فئة التصدير IllustrationsComponent تنفذ OnInit {
العمال: أي = [

"العامل 1"،

"العامل 2"،

"العامل 3"،

"العامل 4"،

"العامل 5"،

]

منشئ () { }

ngOnInit (): باطل {
}

}

كيفية استخدام التوجيه *ngSwitch

وأضاف المترجم: هذا الأمر مفيد جدًا في التطوير الفعلي

نحن نستخدم ngSwitch لتحديد العنصر الذي سيتم عرضه بناءً على عبارات شرطية مختلفة. يشبه توجيه *ngSwitch إلى حد كبير بيان switch الذي نستخدمه. على سبيل المثال:

 <div [ngSwitch]="Myshopping">
<p *ngSwitchCase="'cups'">أكواب</p>
<p *ngSwitchCase="'veg'">الخضروات</p>
<p *ngSwitchCase="'clothes'">بنطلون</p>
<p *ngSwitchDefault>تسوقي</p>
</div>

في typescript :

 التسوق: سلسلة = '';

لدينا متغير MyShopping له قيمة افتراضية ويستخدم لعرض عناصر محددة في الوحدة التي تستوفي الشروط.

عندما تكون قيمة الشرط true ، سيتم عرض العناصر ذات الصلة في DOM ، وسيتم تجاهل العناصر المتبقية. إذا لم يتطابق أي عنصر، فسيتم عرض العنصر *ngSwitchDefault في DOM .

متى نحتاج إلى استخدام التوجيهات الهيكلية في Angular؟

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

أفضل قاعدة هي: عندما نفكر في التعامل مع DOM، فقد حان الوقت لاستخدام التوجيهات الهيكلية .

تلخيص

تعد التوجيهات الهيكلية جزءًا مهمًا من Angular ويمكننا استخدامها بعدة طرق.

آمل أن يتمكن القراء من خلال هذه المقالة من فهم كيفية استخدام هذه التعليمات ومتى يتم استخدام هذه الأوضاع بشكل أفضل.