ما هو إسقاط المحتوى باستخدام ng-content؟

Question

Accepted Answer

**إسقاط المحتوى** يسمح لمكون بقبول وتصيير **الترميز الذي تمرره مكونته الأب** — يتم وضعه عبر ``. إنها طريقة بناء مكونات غلاف مرنة وقابلة لإعادة الاستخدام (بطاقات، حوارات، تخطيطات) حيث يتحكم المستهلك في محتواها الداخلي. (إنه معادل Angular لـ slots في Vue/web-component و `children` في React.) ## إسقاط الفتحة الواحدة ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` توفر البطاقة الغلاف المصمم؛ المكون الأب يقرر ما يدخل بداخله — أكثر مرونة بكثير من تمرير السلاسل النصية عبر `@Input`. ## إسقاط متعدد الفتحات باستخدام select ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` توجه السمة `select` (محدد CSS — سمة أو فئة أو وسم) كل جزء من المحتوى المُسقط إلى فتحة `` الصحيحة، مما يتيح تخطيطات متعددة المناطق. ## المحتوى المُسقط يحتفظ بسياقه الأصلي ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## لماذا يهم إسقاط المحتوى هو المفتاح لبناء مكونات واجهة مستخدم **قابلة لإعادة الاستخدام وقابلة للتركيب** في Angular — بطاقات، نوافذ منبثقة، علامات تبويب، تخطيطات، وأي "غلاف" حيث يوفر المستهلك المحتوى الداخلي. بدونه، ستكون المكونات جامدة (قابلة للتكوين فقط عبر inputs)؛ مع `` (و `select` للفتحات المتعددة)، تصبح حاويات مرنة، وهو أمر ضروري لأنظمة التصميم ومكتبات المكونات المشتركة.