Angular 2雙向數據標準

Question

我試圖用兩個子組件（Infos和Localisation）創建一個父組件（名爲Action），並將子項的輸入與父模型綁定。

這是模型

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

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

父組件

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(); 
    } 
} 

本地化部件

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; 
} 

的相關信息部件

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; 
} 

當我嘗試製作新動作時，位置被保存，但新動作不包含標題。它在我將整個動作傳遞給Infos組件（不僅是標題）時起作用。但它不適用於字符串類型。

Answer 1

您需要使用@Input xxx; @Output xxx更改雙向綁定的語法，如此處所示。

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); 
     } 
} 

這不是一個相關plunker demo，但可以幫助你瞭解這句法。