Angular Academy · Lezione

Input signal con input()

Dichiari gli input reattivi come signal.

Input signal con input() è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Input basati su signal

Angular moderno offre la funzione input() per dichiarare gli input dei componenti come signals, sostituendo il decoratore classico @Input con un'alternativa reattiva.

Dichiarazione di un input signal

Chiami input() con un valore predefinito opzionale. Il risultato è un signal di sola lettura.

import { Component, input } from "@angular/core";

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

Lettura dell'input

Un input signal si legge chiamandolo come una funzione, sia nel codice sia nei template.

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

Associazione dal componente padre

Il componente padre si associa a un input signal esattamente come a un input classico, utilizzando l'associazione di proprietà.

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

Gli input sono di sola lettura

Un semplice input() è di sola lettura all'interno del componente. Non può chiamare set su di esso; solo il componente padre può modificarne il valore.

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

Tipizzazione degli input

Fornisca un tipo generico per garantire la sicurezza dei tipi, soprattutto quando non esiste un valore predefinito da cui dedurlo.

age = input<number>();
label = input<string>("Untitled");

Input nei valori computed

Poiché gli input sono signals, si integrano con computed per ottenere uno stato derivato che si aggiorna automaticamente.

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

Input con effect

Può reagire alle modifiche degli input con effect, che viene rieseguito ogni volta che cambia un signal letto.

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

Nessuna necessità di ngOnChanges

Con gli input signal spesso non è più necessario ngOnChanges; computed ed effect reagiscono alle modifiche al posto Suo.

Alias di un input

Può esporre un nome diverso per l'associazione pubblica con l'opzione alias.

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Perché utilizzare gli input signal

Gli input signal sono reattivi, sicuri rispetto ai tipi e si combinano in modo pulito con computed ed effect, riducendo il codice ripetitivo rispetto all'approccio basato su decoratori e ciclo di vita.

Verifica rapida

Verifichi la Sua comprensione degli input signal.

Riepilogo

La funzione input() dichiara input signal reattivi e di sola lettura. Li legga chiamandoli, ne specifichi il tipo con i generics, ne definisca un alias quando necessario e li combini con computed ed effect invece di ngOnChanges.

Domande Frequenti

La lezione «Input signal con input()» è gratuita?

Sì — il testo completo di «Input signal con input()» è 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 «Input signal con input()»?

Dichiari gli input reattivi come signal. 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 1 di 4.

Quanto tempo richiede la lezione «Input signal con input()»?

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