1

我正在尝试Action使用两个子组件（Infos和Localisation）创建一个父组件（名为），并将子组件的输入与父模型绑定。

这是模型

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组件（不仅是标题）时，它会起作用。但它没有字符串类型。

4

1 回答 1

0

你需要使用@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 演示，但可以帮助您理解这种语法。

于 2016-08-02T13:04:09.513 回答