typescript - Angular2 modellbaserat föräldrar/barn formulär

Jag är nybörjare med Angular2 (beta1) och jag skulle vilja implementera ett slags enkel redigerbar grid, byggd av 2 komponenter. Här använder jag två falska datakomponenter för att hålla saker enkla. De är (se denna Plunker: http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI):

föräldrakomponenten, kallad contact. Säg att den representerar en kontakt med ett namn.
barnkomponenten, som heter entry. Säg att den representerar en post för en kontakt, där varje kontakt kan innehålla 0 eller fler poster. Varje post har en adress och ett postnummer.

Jag skulle vilja skapa ett formulär där användaren kan redigera kontaktens egenskaper, och även dess underordnade poster: han skulle kunna lägga till en ny post, ta bort en befintlig post eller redigera en befintlig post.

För detta ändamål tillhandahåller vyerna för båda dessa komponenter en formulärbaserad mall. Jag kan tänka mig detta dataflöde:

kontakt: användaren redigerar formuläret och klickar sedan på en skicka-knapp för att spara allt. Således kan jag bara ha lite kod som hanterar skicka-knappen och skickar ett evenemang som komponentens output. Kontakten har en entries-array-egenskap: jag kan alltså använda en ngFor-direktiv i dess mall för att rendera en entry-komponent för var och en av dem.
post: posten har egenskaperna addressCtl och zipCtl som representerar styrdirektiven som ingår i ControlGroup som representerar hela formuläret. Dessutom behöver jag ett par egenskaper att binda som indata till komponenten (address och zip), så att jag i mallföräldern kan göra något liknande:
```
<tr *ngFor="#e of entries">
  <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
</tr>
```

Nu är det inte klart för mig hur man ska forma relationen mellan "modell"-egenskaperna som representerar kontrollens inmatning och "form"-direktivens egenskaper. Jag borde kunna få adress- och postnummervärdena från föräldrakomponenten genom [...]-bindningen, och skicka de uppdaterade värdena uppåt via en händelse som utlöses av barnkomponenten (t.ex. blur?). Är detta logiskt i NG2-världen? Hur som helst, jag saknar en bit här: hur kan jag koppla formulärkontrollernas värden till modellens egenskapsvärden? Kan någon göra detta tydligare eller peka på någon bra dokumentation?

Svar #1

Faktum är att användningen av [...]-bindningen endast motsvarar en envägsbindning. När föräldraegenskapen uppdateras i föräldrakomponenten uppdateras värdet även i barnkomponenten.

Men om du vill uppdatera föräldraattribut från barnet måste du använda händelser och @Ouput-attributet.

Här är ett exempel med en labels-komponent:

export class LabelsComponent implements OnInit {
  @Input()
  labels:string[];

  @Output()
  labelsChange: EventEmitter;

  (...)

  removeLabel(label:string) {
    var index = this.labels.indexOf(label, 0);
    if (index != undefined) {
      this.labels.splice(index, 1);
      this.labelsChange.emit(this.labels);
    }
  }

  addLabel(label:string) {
    this.labels.push(this.labelToAdd);
    this.labelsChange.emit(this.labels);
    this.labelToAdd = '';
    this.addAreaDisplayed = false;
  }
}

På detta sätt kan du utnyttja tvåvägsbindning på denna komponent:

<labels [(labels)]="company.labels"></labels>

Hoppas det besvarar din fråga, Thierry

Svar #2

Flyttade precis kommentaren till svar...

Du kan skicka objektet e, istället för att skicka strängen. d.v.s.

<my-entry [entry] = "e"></my-entry>

använd sedan ng-model för varje input i din my-entry-komponent, så får du automatiskt tvåvägsbindningar.