Angular Academy · Lezione

Creare comportamenti riutilizzabili

Racchiudere il comportamento in direttive componibili

Creare comportamenti riutilizzabili è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

I comportamenti come blocchi costitutivi

L'API di composizione dà il meglio quando si progettano direttive piccole e focalizzate, ciascuna delle quali incapsula un singolo comportamento, per poi comporle nei componenti secondo necessità.

Una direttiva con un unico scopo

Mantenga ogni comportamento piccolo e indipendente.

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

Un comportamento al passaggio del mouse

Un altro comportamento rileva il passaggio del mouse e attiva o disattiva una classe.

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

Composizione dei comportamenti

Un componente card compone entrambi i comportamenti senza collegamenti nel template.

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

Riutilizzo tra componenti

Gli stessi comportamenti possono essere composti in pulsanti, riquadri o pannelli. Li definisca una volta e li riutilizzi ovunque, senza duplicazioni.

Comportamenti configurabili

Aggiunga input per rendere configurabile un comportamento, quindi li esponga nei punti in cui il comportamento viene composto.

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

Esposizione del parametro

Esponga l'input configurabile affinché ogni host possa impostarlo.

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

Coordinamento dei comportamenti

I comportamenti possono iniettarsi a vicenda tramite l'injector dell'elemento per coordinarsi; ad esempio, un effetto ripple può reagire a uno stato di pressione.

Testabilità

I comportamenti piccoli sono facili da testare con unit test in isolamento e poi da considerare affidabili quando vengono composti, migliorando l'affidabilità complessiva.

Convenzioni di denominazione

Assegni ai comportamenti un nome che descriva ciò che fanno (appElevate, appHoverClass, appAutofocus). I nomi chiari rendono la composizione autoesplicativa.

Una libreria di comportamenti

Con il tempo costruirà una libreria di comportamenti componibili a cui qualsiasi componente potrà aderire, riducendo drasticamente la logica ripetuta dell'host.

Verifica rapida

Verifichi la Sua comprensione dei comportamenti riutilizzabili.

Riepilogo

Ha imparato a progettare direttive piccole e indipendenti, ciascuna delle quali incapsula un singolo comportamento, a comporle con hostDirectives, a esporre input configurabili e a costruire una libreria di comportamenti riutilizzabile e testabile.

Domande Frequenti

La lezione «Creare comportamenti riutilizzabili» è gratuita?

Sì — il testo completo di «Creare comportamenti riutilizzabili» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Creare comportamenti riutilizzabili»?

Racchiudere il comportamento in direttive componibili Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Creare comportamenti riutilizzabili»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy