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

Question

IT Interview Practice · 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` للفتحات المتعددة)، تصبح حاويات مرنة، وهو أمر ضروري لأنظمة التصميم ومكتبات المكونات المشتركة.

إسقاط الفتحة الواحدة

إسقاط متعدد الفتحات باستخدام select

المحتوى المُسقط يحتفظ بسياقه الأصلي

لماذا يهم

أسئلة ذات صلة