Innholdsprojisering med én plass
Projiser innhold med ng-content.
Innholdsprojisering med én plass er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva er innholdsprojeksjon?
Innholdsprojeksjon lar en komponent motta markup fra forelderen og vise den i sin egen mal. Det er Angulars tilsvarende løsning for «slots» i web components.
Forelderen skriver innhold mellom komponentens tagger, og komponenten bestemmer hvor innholdet skal vises.
Hvorfor De trenger det
Gjenbrukbare omslag som kort, dialoger og paneler kjenner ikke innholdet sitt på forhånd. Innholdsprojeksjon gjør dem til fleksible beholdere.
- Bygg et kort én gang, og fyll det med hva som helst
- Behold layoutlogikken i komponenten
- Behold innholdet hos forbrukeren
ng-content-elementet
Elementet <ng-content> markerer stedet der projisert innhold plasseres. Et oppsett med én slot bruker nøyaktig én <ng-content> uten attributtet select.
@Component({
selector: 'app-card',
template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}Bruke komponenten
Alt forelderen plasserer mellom komponenttaggene, projiseres inn i sloten.
<app-card>
<h2>Hello</h2>
<p>This text is projected into the card.</p>
</app-card>Én slot = ett utløp
Med én navnløs slot går alle projiserte noder inn i den ene <ng-content>. Det finnes ingen filtrering, og rekkefølgen bevares nøyaktig slik forelderen skrev den.
Standardinnhold
De kan plassere reservemarkup inne i <ng-content>. Moderne Angular viser dette standardinnholdet bare når forbrukeren ikke projiserer noe inn i sloten.
<div class="card">
<ng-content>No content provided.</ng-content>
</div>Stile projisert innhold
Projisert innhold tilhører visningen til forelderen, så det styles av forelderens stiler, ikke kortets. For å nå projiserte noder fra kortet kan De bruke ::ng-deep med måte eller stole på globale stiler.
Innhold kontra visning
Angular skiller mellom innholdsbarn (projisert inn) og visningsbarn (deklarert i malen). Dette er viktig for spørringer som contentChild og viewChild.
icon = contentChild(IconComponent);Livssyklus: ngAfterContentInit
Projisert innhold er tilgjengelig etter at ngAfterContentInit() er kjørt. Bruk den (eller ngAfterContentChecked) til å lese innholdsbarn på en trygg måte.
ngAfterContentInit() {
console.log('Projected content ready');
}Et praktisk paneleksempel
Her er et komplett, gjenbrukbart panel. Forbrukeren har full kontroll over innholdet; panelet styrer skallet.
@Component({
selector: 'app-panel',
template: '<section class="panel"><ng-content></ng-content></section>',
styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}Vanlig feil
Hvis De plasserer den samme navnløse <ng-content> to ganger, blir ikke innholdet duplisert. Angular projiserer bare innhold til den siste samsvarende sloten. Bruk projeksjon med flere slots hvis De trenger flere områder.
Hurtigsjekk
Test forståelsen Deres av projeksjon med én slot.
Oppsummering
De har lært at innholdsprojeksjon bruker <ng-content> til å vise markup levert av forelderen inne i en komponent. Projeksjon med én slot bruker ett navnløst utløp, det projiserte innholdet tilhører foreldrevisningen, og det blir tilgjengelig i ngAfterContentInit.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Innholdsprojisering med én plass» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Innholdsprojisering med én plass», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Innholdsprojisering med én plass»?
Projiser innhold med ng-content. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Innholdsprojisering med én plass»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Innholdsprojisering med én plass
- Projisering med flere plasser ved hjelp av select
- ng-template og ng-container
- TemplateRef og ViewContainerRef