Angular Academy · Lektion

Bygga återanvändbara beteenden

Paketera beteenden som komponerbara direktiv.

Lektion 3 av 413 steg

Bygga återanvändbara beteenden är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 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.

Beteenden som byggklossar

Sammansättnings-API:t kommer verkligen till sin rätt när ni utformar små, fokuserade direktiv som vart och ett kapslar in ett beteende och sedan sätter samman dem med komponenter efter behov.

Ett direktiv med ett enda syfte

Håll varje beteende litet och fristående.

@Directive({
  selector: '[appElevate]'
})
export class ElevateDirective {
  @HostBinding('style.boxShadow')
  shadow = '0 2px 8px rgba(0,0,0,.15)';
}

Ett hovringsbeteende

Ett annat beteende lyssnar efter hovring och växlar en klass.

@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
  @HostBinding('class.is-hover') hovering = false;
  @HostListener('mouseenter') on() { this.hovering = true; }
  @HostListener('mouseleave') off() { this.hovering = false; }
}

Sätta samman beteenden

En kortkomponent sätter samman båda beteendena utan någon koppling i mallen.

@Component({
  selector: 'app-card',
  hostDirectives: [ElevateDirective, HoverClassDirective],
  template: '<ng-content></ng-content>'
})
export class CardComponent {}

Återanvändning mellan komponenter

Samma beteenden kan sättas samman med knappar, plattor eller paneler. Definiera en gång och återanvänd överallt utan duplicering.

Konfigurerbara beteenden

Lägg till inputs för att göra ett beteende inställningsbart och exponera dem sedan där beteendet sätts samman.

@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
  level = input(1);
}

Exponera inställningen

Exponera den konfigurerbara inputen så att varje värdelement kan ange den.

hostDirectives: [{
  directive: ElevateDirective,
  inputs: ['level']
}]

Samordna beteenden

Beteenden kan injicera varandra via elementets injektor för att samordna sig, till exempel när ett krusningsbeteende reagerar på ett nedtryckt tillstånd.

Testbarhet

Små beteenden är enkla att enhetstesta isolerat och kan sedan användas med förtroende när de sätts samman, vilket förbättrar den övergripande tillförlitligheten.

Namngivningskonventioner

Namnge beteenden efter vad de gör (appElevate, appHoverClass, appAutofocus). Tydliga namn gör sammansättningen självbeskrivande.

Ett beteendebibliotek

Med tiden bygger ni upp ett bibliotek med sammansättningsbara beteenden som alla komponenter kan välja att använda, vilket kraftigt minskar upprepad logik i värdelement.

Snabbtest

Testa er förståelse av återanvändbara beteenden.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er att utforma små, fristående direktiv som vart och ett kapslar in ett beteende, sätta samman dem med hostDirectives, exponera inställningsbara inputs och bygga ett återanvändbart och testbart bibliotek med beteenden.

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 ”Bygga återanvändbara beteenden” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Bygga återanvändbara beteenden”, 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 ”Bygga återanvändbara beteenden”?

Paketera beteenden som komponerbara direktiv. 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 3 av 4.

Hur lång tid tar lektionen ”Bygga återanvändbara beteenden”?

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