Importazione diretta delle dipendenze
Aggiunga gli import a un componente anziché a un modulo.
Importazione diretta delle dipendenze è 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.
Importare direttamente le dipendenze
Un componente standalone dichiara ciò che usa nel proprio array imports. Questo sostituisce la separazione tra declarations e imports degli NgModule.
L'array imports
Aggiunga altri componenti standalone, direttive e pipe all'array imports del decorator @Component.
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
imports: [ChildComponent],
template: '<app-child></app-child>'
})
export class ParentComponent {}Importare altri componenti
Per visualizzare un componente figlio nel template, importi la sua classe. A quel punto sarà possibile usare il relativo selector.
Importare le direttive
Le direttive standalone si importano allo stesso modo. Dopo averle importate, può applicarle nel template.
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'app-note',
imports: [HighlightDirective],
template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}Importare le pipe
Anche le pipe standalone vengono inserite in imports. Ad esempio, importando una pipe personalizzata potrà usarla nell'interpolazione.
Direttive Angular comuni
Alcuni strumenti integrati provengono da pacchetti. Ad esempio, RouterLink proviene da @angular/router e deve essere importato per poterlo usare.
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-nav',
imports: [RouterLink],
template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}FormsModule e simili
È possibile importare anche gli NgModule esistenti in un componente standalone. Importando FormsModule si abilitano funzionalità dei moduli basati su template come ngModel.
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [FormsModule],
template: '<input [(ngModel)]="name">'
})
export class FormComponent {
name = '';
}Il controllo di flusso integrato non richiede import
I blocchi di controllo del flusso integrati (if, for, switch, defer) fanno parte del linguaggio dei template, quindi non richiedono alcun import. Questo li distingue dalle precedenti direttive strutturali.
Importare solo ciò che si usa
Mantenga gli import essenziali: elenchi solo le dipendenze a cui il template fa effettivamente riferimento. In questo modo i componenti restano snelli e adatti al tree-shaking.
Importare più elementi
L'array imports può contenere più elementi insieme.
imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]Gli errori di compilazione sono una guida
Se usa un selector o una pipe non importati, Angular segnala chiaramente che non sono riconosciuti in quel componente. Per risolvere il problema, li aggiunga a imports.
Controllo rapido: import
Dove vengono inserite le dipendenze standalone?
Riepilogo: import diretti
I componenti standalone elencano le proprie dipendenze nell'array imports del componente: altri componenti, direttive, pipe e persino NgModule come FormsModule. Il controllo di flusso integrato non richiede import. Mantenga gli import essenziali. Prossimo argomento: avviare un'app standalone.
Domande Frequenti
La lezione «Importazione diretta delle dipendenze» è gratuita?
Sì — il testo completo di «Importazione diretta delle dipendenze» è 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 «Importazione diretta delle dipendenze»?
Aggiunga gli import a un componente anziché a un modulo. 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 «Importazione diretta delle dipendenze»?
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
- Perché utilizzare i componenti standalone
- Creazione di componenti standalone
- Importazione diretta delle dipendenze
- Avvio di un'app standalone