Angular Academy · Lektion

Brugerdefinerede properties med tovejsbinding

Eksponér egne inputs med tovejsbinding.

Lektion 4 af 413 trin

Brugerdefinerede properties med tovejsbinding er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Tilpasset tovejsbinding

Du kan gøre enhver komponentegenskab bindbar i begge retninger. Angular understøtter to tilgange: det klassiske par med @Input plus @Output eller det moderne signal model().

Navngivningskonventionen

For at tovejsbinding kan fungere, skal outputnavnet være inputnavnet med suffikset Change. Inputtet size kræver f.eks. outputtet sizeChange.

Deklaration af inputtet

Start med et almindeligt input, som den overordnede komponent kan angive.

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

Deklaration af det matchende output

Tilføj en @Output-EventEmitter med et navn, der har suffikset Change.

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

Udsendelse ved opdatering

Når komponenten ændrer værdien internt, skal du opdatere egenskaben og udsende den nye værdi, så den overordnede komponent forbliver synkroniseret.

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

Binding fra den overordnede komponent

Nu kan den overordnede komponent bruge syntaksen bananen-i-en-kasse sammen med din tilpassede egenskab.

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

Fuldt input/output-eksempel

Her er en komplet tilpasset komponent med tovejsbinding, der bruger den klassiske API.

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

Den moderne model-tilgang

Den samme funktionalitet kræver langt mindre kode med model(), som opretter input/output-parret for dig.

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

Sammenligning af de to tilgange

Det klassiske par er eksplicit og fungerer overalt, mens model() er kortfattet og signalbaseret. Begge eksponerer den samme [(value)]-binding til overordnede komponenter.

Flere tovejsbundne egenskaber

En komponent kan eksponere flere egenskaber, der kan bindes i begge retninger, og hver af dem følger konventionen input/inputChange.

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

Valg af tilgang

Til ny kode bør du foretrække model() på grund af den korte syntaks og integrationen med signaler. Brug det eksplicitte input/output-par, når du har brug for fin kontrol eller ikke bruger signaler.

Hurtigt tjek

Test din forståelse af tilpassede egenskaber med tovejsbinding.

Besvar den i den interaktive lektion

Opsummering

Tilpasset tovejsbinding kræver et input plus et output med navnet inputChange, som udsender ved hver opdatering. Det moderne signal model() opretter automatisk dette par og er det korte valg til ny kode.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Brugerdefinerede properties med tovejsbinding” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Brugerdefinerede properties med tovejsbinding”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Brugerdefinerede properties med tovejsbinding”?

Eksponér egne inputs med tovejsbinding. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Brugerdefinerede properties med tovejsbinding”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Opsamling på property- og eventbinding
Tovejsbinding med ngModel
model()-signalinputs
Brugerdefinerede properties med tovejsbinding

← Tilbage til Angular Academy