Question

我正在尝试创建一个包含两个子组件（Action和Infos）的父组件（名为Localisation），并将子项输入与父模型绑定。< / p>

这是模型

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 xxxChange 双向绑定的语法，如下所示。

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 ，但可以帮助您理解这种语法。

Angular 2双向数据绑定

1 个答案: