العودة إلى الدورة

توجيهات الهيكلة المدمجة: *NgSwitch

مطور Angular الشامل: من الصفر إلى الاحتراف

17. توجيهات الهيكلة المدمجة: *NgSwitch

*NgSwitch هي طريقة Angular لتنفيذ العرض الشرطي بناءً على قيم محتملة متعددة، على غرار عبارة switch في JavaScript.

يزيل العناصر من DOM تماماً مثل *NgIf.

ثلاثية توجيهات NgSwitch

  1. [ngSwitch]: يُطبق على عنصر الحاوية. يحدد التعبير الذي سيتم تقييم قيمته.
  2. *ngSwitchCase: يُطبق على العناصر داخل الحاوية. يعرض العنصر إذا كانت قيمته مطابقة لتعبير [ngSwitch].
  3. *ngSwitchDefault: يُطبق على عنصر داخل الحاوية. يُعرض إذا لم يتم استيفاء أي من شروط *ngSwitchCase.

مثال على *NgSwitch

فئة المكون:

typescript export class NotificationComponent { userRole: string = 'admin'; // 'guest', 'user', or 'admin'

promoteToAdmin() { this.userRole = 'admin'; } }

القالب:

html <button (click)="promoteToAdmin()">Promote</button>

<div [ngSwitch]="userRole"> <div *ngSwitchCase="'admin'" class="badge-admin"> Administrator Access Granted. </div> <div *ngSwitchCase="'user'" class="badge-user"> Standard User Privileges. </div> <div *ngSwitchCase="'guest'"> Guest Access (Read-only). </div> <!-- يتم عرضه إذا كانت userRole أي شيء آخر (على سبيل المثال، 'pending') --> <div *ngSwitchDefault> Unknown Role. Please contact support. </div> </div>

يُعد *NgSwitch أكثر وضوحاً وغالباً ما يكون أكثر كفاءة في الأداء من تسلسل عبارات *NgIf/else المتعددة، خاصة عند المقارنة مع متغير واحد.