model()-signalinputs
Skapa tvåvägsbindningar med modelsignaler.
model()-signalinputs ä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.
Signaler möter tvåvägsbindning
Modern Angular erbjuder model(), ett signalbaserat sätt att skapa indata som kan bindas i två riktningar utan manuella input/output-par.
Deklarera en model-indata
Anropa model() för att skapa en skrivbar signal som en överordnad komponent kan binda till i två riktningar.
import { Component, model } from "@angular/core";
@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
checked = model(false);
}Binda från en överordnad komponent
Den överordnade komponenten använder syntaxen bananen-i-en-låda tillsammans med modellnamnet, precis som med ngModel.
<app-toggle [(checked)]="isOn"></app-toggle>
// parent
isOn = signal(true);Läsa ett model-värde
En model är en signal, så du läser den genom att anropa den som en funktion.
export class ToggleComponent {
checked = model(false);
describe() {
return this.checked() ? "on" : "off";
}
}Skriva till en model
Uppdatera en model med set eller update. Ändringen sprids automatiskt tillbaka till den överordnade komponenten.
toggle() {
this.checked.update(c => !c);
}
// or
turnOn() {
this.checked.set(true);
}Obligatorisk model-indata
Använd model.required() när den överordnade komponenten måste ange ett värde.
import { model } from "@angular/core";
export class FieldComponent {
value = model.required<string>();
}Använda model i mallen
Bind signalen model direkt i komponentens egen mall. När du anropar den får du det aktuella värdet.
@Component({
selector: "app-toggle",
template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
checked = model(false);
flip() { this.checked.update(v => !v); }
}Ingen manuell output behövs
Med model() behöver du inte deklarera en separat @Output. Angular kopplar automatiskt upp händelsen för ändringar med hjälp av konventionen: namnet plus Change.
model kontra input
En vanlig input() är skrivskyddad inne i komponenten, medan en model() är skrivbar och stöder tvåvägsbindning tillbaka till den överordnade komponenten.
// read-only:
label = input("");
// two-way writable:
value = model("");En räknare med model
Här är en fristående räknare vars värde hålls synkroniserat med den överordnade komponenten.
@Component({
selector: "app-counter",
template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
count = model(0);
inc() { this.count.update(c => c + 1); }
}När ska model användas?
Använd model() när en underordnad komponent äger ett värde som den överordnade komponenten också vill läsa och uppdatera, till exempel anpassade formulärkontroller, växlar och skjutreglage.
Snabb kontroll
Testa din förståelse av signalindata med model.
Sammanfattning
Funktionen model() skapar en skrivbar signal som stöder tvåvägsbindning utan ett manuellt input/output-par. Läs den genom att anropa den, skriv med set eller update och bind från den överordnade komponenten med [(name)].
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
Vanliga frågor
Är lektionen ”model()-signalinputs” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”model()-signalinputs”, 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 ”model()-signalinputs”?
Skapa tvåvägsbindningar med modelsignaler. 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 ”model()-signalinputs”?
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
- Repetition av property- och eventbinding
- Tvåvägsbindning med ngModel
- model()-signalinputs
- Egna tvåvägsbindningsbara properties