البرمجة

فهم استخدام projectable nodes في Angular2

عند قراءة الوثائق الخاصة بـ ViewContainerRef و ComponentFactory في Angular2، نجد، على سبيل المثال، الأسلوب ViewContainerRef#createComponent الذي يأخذ 3 وسائط: componentFactory، injector، و projectableNodes.

لقد حاولت البحث عن معنى projectableNodes وكيفية استخدامها في المدونات، والبرامج التعليمية، وشفرة المصدر، ولكنني لم أجد الكثير من المعلومات.

عند البحث في التغييرات التي تم إجراؤها في توجيهة ngComponentOutlet، لم أتمكن سوى من جمع أن السلسلة في projectableNodes تُظهر أو تُعرض على عرض العناصر المُنشأة (كما هو الحال ربما في ng-content). إذا كان الأمر كذلك، فهذا يُشكل الإرباك لأن لدينا ViewContainerRef#createEmbeddedView للغرض نفسه.

أرغب في معرفة ما هي هذه العناصر المُعرضة والحصول على مثال على استخدامها.

المزيد من المعلومات

في Angular2، مصطلح “projectable nodes” يشير إلى العناصر التي يمكن تضمينها أو تظهر داخل عنصر DOM يُنشئ داخل المكون. عندما يتم إنشاء مكون باستخدام ComponentFactory ويتم تمرير قيمة لمعامل projectableNodes، فإن هذه القيمة تمثل العناصر التي سيتم عرضها داخل المكون الجديد.

لفهم أفضل كيفية استخدام projectable nodes، دعنا نلقي نظرة على مثال. لنفترض أن لدينا مكون يُسمى ParentComponent ويحتوي على العناصر التالية في قالبه:

html
<app-child> <div>Content to be projecteddiv> app-child>

في هذا المثال، العنصر

هو ما يُعرف باسم “projectable node”. عندما يتم تضمين مكون ChildComponent داخل ParentComponent، يمكن لـ ParentComponent إعادة توجيه (project) العنصر

داخل مكون ChildComponent. ويمكننا تحقيق ذلك باستخدام مكون ChildComponent بالطريقة التالية:

typescript
@Component({ selector: 'app-child', template: `
`
}) export class ChildComponent {}

في هذا المكون، استخدمنا لإدراج المحتوى المُعرض داخل مكون ChildComponent. وعند استخدام ParentComponent، يمكننا تمرير العناصر التي نريد عرضها داخل ChildComponent كـ projectable nodes:

typescript
@Component({ selector: 'app-parent', template: `
Content to be projected
`
}) export class ParentComponent {}

باستخدام هذه الطريقة، يتم عرض العنصر

داخل مكون ChildComponent بشكل صحيح. وهذا يوضح كيفية استخدام projectable nodes لتضمين المحتوى داخل المكونات في Angular2.

باختصار، يُعتبر استخدام projectable nodes وسيلة فعالة لتخصيص تنظيم وعرض المحتوى داخل المكونات في Angular2، ويوفر مزيدًا من المرونة في تصميم واجهة المستخدم.

مقالات ذات صلة

زر الذهاب إلى الأعلى