Angular Academy · Lektion

Exponera indata och utdata

Exponera indata och utdata från värddirektiv.

Lektion 2 av 413 steg

Exponera indata och utdata är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Exponera komponerade API:er

När Ni komponerar ett direktiv via hostDirectives är dess indata och utdata dolda som standard. Med kompositions-API:t kan Ni exponera valda indata och utdata i värdens publika API.

Objektformen

I stället för att bara lista klassen använder Ni ett objekt med arrayerna directive, inputs och outputs.

hostDirectives: [{
  directive: TooltipDirective,
  inputs: ['tooltipText'],
  outputs: ['tooltipShown']
}]

Exponera en input

Om ett inputnamn listas i inputs kan konsumenter binda till det på värdelementet.

<app-button tooltipText="Save changes"></app-button>

Exponera en output

Om en output listas skickar värdelementet vidare händelserna från det direktivet.

<app-button (tooltipShown)="onShown()"></app-button>

Byta namn vid exponering

Använd formen publicName: internalName för att byta namn på en input eller output när den exponeras.

inputs: ['tooltipText: hint']
// consumers bind [hint]="..."

Byta namn på outputs

Outputs byter namn på samma sätt.

outputs: ['tooltipShown: shown']
// template: (shown)="..."

Varför dölja som standard?

Om sammansatta inputs och outputs döljs förblir värdelementets API avsiktligt utformat. Ni exponerar endast det som är relevant för konsumenterna och undviker att läcka interna detaljer om direktiv.

Kombinera med egna inputs

Värdelementet kan ha egna inputs utöver de exponerade. Angular sammanfogar dem till ett enda offentligt API på elementet.

@Component({
  selector: 'app-button',
  hostDirectives: [{
    directive: TooltipDirective,
    inputs: ['tooltipText']
  }]
})
export class ButtonComponent {
  label = input('');
}

Namnkollisioner

Om namnet på en exponerad input krockar med värdelementets egen input kan ni undvika konflikten och tydliggöra avsikten genom att byta namn.

Tvåvägsbindningar

Om en tvåvägsbindning ska fungera genom sammansättning exponerar ni både inputen och dess matchande Change-output med konsekventa namn.

Bästa praxis

Exponera det minsta, väl namngivna API som konsumenterna behöver. Anpassa interna namn till komponentens vokabulär, inte till det underliggande direktivets.

Snabbtest

Testa er förståelse av hur inputs och outputs exponeras.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er att objektformen av hostDirectives exponerar valda inputs och outputs i värdelementets API, med möjlighet att byta namn enligt publicName: internalName, så att det offentliga API:t förblir avsiktligt utformat.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Exponera indata och utdata” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Exponera indata och utdata”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Exponera indata och utdata”?

Exponera indata och utdata från värddirektiv. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Exponera indata och utdata”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy