فهم استخدام 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 ويحتوي على العناصر التالية في قالبه:

htmlCopy code
<app-child>
  <div>Content to be projecteddiv>
app-child>

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

typescriptCopy code
@Component({
  selector: 'app-child',
  template: `
    

      
    
  `
})
export class ChildComponent {}

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