Angular 2 Zweiweg-Daten abwartend

Question

ich eine Eltern-Komponente zu erstellen versuchen (benannt Action) mit zwei Kindern Komponenten (Infos und Localisation) und die Kinder-Eingänge mit dem übergeordneten Modell zu binden.

Dies ist das Modell

export class Action{ 
    titre : string; 
    localisation = new Localisation(); 
} 

export class Localisation{ 
    region : string; 
    departement : string; 
} 

die übergeordnete Komponente

import { Component,OnInit } from '@angular/core'; 
import {InfosComponent} from './infos.component'; 
import {LocalisationComponent} from './localisation.component'; 
import {Action} from './action'; 
import { ActionService } from './action.service'; 

@Component({ 
    selector: 'form-action', 
    template: ` 

    <h1>Formulaire action {{currentAction.titre}}</h1> 
    <infos [titre]="currentAction.titre"></infos> 
    <localisation [localisation]="currentAction.localisation"></localisation> 

    <button (click)="ajouteAction(currentAction)">Ajouter</button> 

    <h2>Mes actions</h2> 
    <ul> 
     <li *ngFor="let act of actions"> 
     {{act.titre}} ({{act.localisation.region}}-{{act.localisation.departement}}) 
     </li> 
    </ul> 
    `, 
    directives: [InfosComponent,LocalisationComponent], 
    providers : [ActionService] 
}) 
export class ActionComponent implements OnInit{ 
    currentAction : Action; 
    actions : Action[]; 

    constructor(private actionService: ActionService) { 
     this.currentAction =new Action(); 
     console.log(this.currentAction); 
    } 

    ajouteAction(action){ 
    console.log (action); 
    this.actionService.saveAction(action); 
    } 

    getActions(){ 
     this.actionService.getActions().then(actions => this.actions = actions); 
    } 

    ngOnInit() { 
     this.getActions(); 
    } 
} 

Die Lokalisierungskomponente

import { Component, Input } from '@angular/core'; 
import {Localisation} from './action'; 

@Component({ 
    selector: 'localisation', 
    template: ` 
    <h2>Localisation</h2> 
    <p> 
     <label for="region">Région : </label> 
     <input id="region" [(ngModel)]="localisation.region" placeholder="Région"/> 
    </p> 
    <p> 
     <label for="departement">Département : </label> 
     <input id="departement" type="text" [(ngModel)]="localisation.departement" placeholder="Département"/> 
    </p> 
    ` 
}) 
export class LocalisationComponent { 
    @Input("localisation") localisation: Localisation; 
} 

Die Infos Komponente

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'infos', 
    template: ` 
    <h2>Informations</h2> 
    <p> 
     <label for="titre">Titre : </label> 
     <input id="titre" [(ngModel)]="titre" placeholder="Titre"/> 
    </p> 

    ` 
}) 
export class InfosComponent { 
    @Input() titre: string; 
} 

Wenn ich versuche, eine neue Aktion auszuführen, wird der Speicherort gespeichert, aber die neue Aktion enthält den Titel nicht. Es funktioniert, wenn ich die ganze Aktion an die Komponente Infos (nicht nur den Titel) übergeben. Aber es ist nicht mit einem String-Typ.

Answer 1

Sie müssen @Input xxx verwenden; @Output xxxChange Syntax für Zwei-Wege-Bindung wie hier gezeigt.

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

export class LocalisationComponent { 
    @Input() localisation: Localisation; 
    @Output() localisationChange=new EventEmitter(); 

    ngOnChanges(changes: SimpleChanges){ 
     this.localisationChange.emit(changes['localisation'].currentValue); 
    } 
} 

---

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

export class InfosComponent { 
    @Input() titre: string; 
    @Output() titreChange=new EventEmitter(); 

     ngOnChanges(changes: SimpleChanges){ 
      this.localisationChange.emit(changes['titre'].currentValue); 
     } 
} 

Dies ist kein relevantes plunker demo aber helfen können, diese Syntax zu verstehen.