Creazione di componenti standalone
Dichiari componenti con il flag standalone.
Creazione di componenti standalone è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Creazione di un componente standalone
Un componente standalone è semplicemente una classe decorata con @Component e contrassegnata come standalone. In Angular v19 e successive è il valore predefinito, quindi spesso non è nemmeno necessario scrivere il flag.
Il flag standalone
In passato si impostava standalone: true nel decorator. Dalla v19 in poi, i componenti sono standalone per impostazione predefinita, quindi il flag è facoltativo.
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
standalone: true, // optional in v19+
template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}Selector
Il selector è il tag dell'elemento personalizzato usato per inserire il componente in un template, ad esempio app-greeting.
// usage in another template:
// <app-greeting></app-greeting>Template inline
Usi la proprietà template per inserire HTML inline, una soluzione ideale per i componenti piccoli.
@Component({
selector: 'app-badge',
template: '<span class="badge">New</span>'
})
export class BadgeComponent {}Template esterno
Per viste più grandi, usi templateUrl per indicare un file HTML.
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html'
})
export class ProfileComponent {}Stili
Aggiunga stili con ambito limitato al componente usando styles (inline) o styleUrl / styleUrls (file esterni).
@Component({
selector: 'app-card',
template: '<div class="card"></div>',
styles: ['.card { padding: 16px; }']
})
export class CardComponent {}Logica della classe del componente
Il corpo della classe contiene stato e comportamento. Con i signals, dichiari lo stato reattivo come proprietà.
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
n = signal(0);
}Nessun modulo necessario
Noti che non sono presenti né @NgModule né un array declarations. Il componente è pronto per essere importato ovunque sia necessario.
Convenzione per i nomi dei file
La convenzione Angular assegna nomi come greeting.component.ts ai file, GreetingComponent alla classe e app-greeting al selector.
Usare un componente all'interno di un altro
Per usare un componente figlio standalone, lo importi nell'array imports del componente padre (argomento della prossima lezione) e inserisca il suo selector nel template del padre.
Generazione con la CLI
Angular CLI genera i componenti standalone per impostazione predefinita. Eseguendo ng generate component greeting, creerà automaticamente lo scheletro di un GreetingComponent standalone.
Controllo rapido: creazione dei componenti
Informazioni sui valori predefiniti standalone.
Riepilogo: creazione di un componente standalone
Si crea un componente standalone con @Component, impostando facoltativamente standalone: true (il valore predefinito nella v19 e successive). Si definiscono un selector, template o templateUrl, stili facoltativi e la logica della classe. Non è richiesto alcun NgModule. Prossimo argomento: importare direttamente le dipendenze.
Domande Frequenti
La lezione «Creazione di componenti standalone» è gratuita?
Sì — il testo completo di «Creazione di componenti standalone» è 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 «Creazione di componenti standalone»?
Dichiari componenti con il flag standalone. 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 2 di 4.
Quanto tempo richiede la lezione «Creazione di componenti standalone»?
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