63. توجيهات الهيكلة المخصصة (تنفيذ *NgIf مخصص)

تتطلب توجيهات الهيكلة إدارة مراجع القالب لتقرير ما إذا كان سيتم عرض المحتوى أم لا. نستخدم خدمتين قابلتين للحقن:

1. TemplateRef: يمثل المحتوى الموجود داخل وسم <ng-template> (العنصر الذي يُطبق عليه التوجيه).
2. ViewContainerRef: يمثل الحاوية التي يجب إرفاق القالب بها أو فصله عنها (الموقع في DOM).

مثال: *appUnless (عكس *NgIf)

يعرض هذا التوجيه المحتوى ما لم يكن الشرط صحيحاً.

typescript import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appUnless]' }) export class UnlessDirective { private hasView = false;

// تعمل دالة setter كلما تغيرت قيمة الإدخال @Input() set appUnless(condition: boolean) { // condition هي القيمة المنطقية التي تم تمريرها إلى التوجيه (*appUnless='false') if (!condition && !this.hasView) { // 1. إنشاء العرض المُضمَّن (إدراج المحتوى في DOM) this.vcRef.createEmbeddedView(this.templateRef); this.hasView = true; } else if (condition && this.hasView) { // 2. مسح العرض (إزالة المحتوى من DOM) this.vcRef.clear(); this.hasView = false; } }

// حقن TemplateRef (ماذا سيتم عرضه) و ViewContainerRef (أين سيتم عرضه) constructor( private templateRef: TemplateRef, private vcRef: ViewContainerRef ) { } }

الاستخدام

html

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