Apakah unjuran kandungan dengan ng-content?

Question

Accepted Answer

**Unjuran kandungan** membenarkan komponen menerima dan merender **markup yang dilewatkan oleh induknya** — diletakkan melalui ``. Ia adalah cara membina komponen wrapper yang fleksibel dan boleh diguna semula (kad, dialog, susun atur) yang kandungan dalamannya dikawalan oleh pengguna. (Ia adalah setara Angular untuk slot Vue/web-komponen dan `children` React.) ## Unjuran slot tunggal ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Kad menyediakan wrapper yang digayakan; induk memutuskan apa yang masuk ke dalam — jauh lebih fleksibel daripada melewatkan rentetan melalui `@Input`. ## Unjuran multi-slot dengan select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Atribut `select` (pemilih CSS — atribut, kelas, atau tag) mengarahkan setiap bahagian kandungan yang diunjurkan ke slot `` yang betul, memungkinkan susun atur berbilang kawasan. ## Kandungan yang diunjurkan mengekalkan konteks asalnya ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Mengapa penting Unjuran kandungan adalah kunci untuk membina komponen UI yang **boleh diguna semula dan boleh gubah** dalam Angular — kad, modal, tab, susun atur, dan sebarang "kulit" di mana pengguna membekalkan kandungan dalaman. Tanpanya, komponen akan kaku (hanya boleh dikonfigur melalui input); dengan `` (dan `select` untuk banyak slot), mereka menjadi bekas yang fleksibel, yang penting untuk sistem reka bentuk dan perpustakaan komponen bersama.