如何修改父组件，而不用改变父项的兄弟Angular 2

Question

我有更新属性的问题，只在当前子组件的父项中，我面对的行为是当我尝试修改/从子组件中更新父项的属性不仅父母，但父母的兄弟姐妹也被改变，我做错了什么，我如何才能实现只更新孩子的父母？，我的代码如下

parent.component html的

<div *ngSwitchCase="'active'"> 
       <accordion *ngIf="PhasesForDirective !== undefined"> 
        <accordion-group *ngFor="let phase of PhasesForDirective" [panelClass]="customClass" [isOpen]="true"> 
         <div accordion-heading> 
          {{phase.name | uppercase}} 
          <div class="pull-right float-xs-right"><input [(ngModel)]="totalHoursPhase" name="total" ngDefaultControl/> Horas de vuelo</div> 
         </div> 
         <div class="duties"> 
          Duties: Alumno: <strong>{{phase.dutieStudent}}</strong>, Instructor: <strong>{{phase.dutieInstructor}}</strong> <em>Máximo de horas al día.</em> 
         </div> 

         <fly-types (AddHours)="onAddHours($event)" phaseID = {{phase.id}}></fly-types> 
        </accordion-group> 

       </accordion> 

parent.component.ts

export class component2Component implements OnInit, OnChanges { 
    @Input() directiveInput: DirectiveModel; 
    private PhasesForDirective: Array<PhaseModel>; 
    private totalHoursPhase:number; 
    private status: string ; 

    constructor(private _directiveService: directiveService) { } 

    ngOnInit(){ 
    } 

    ngOnChanges() { 

     if (this.directiveInput !== undefined) { 

      this.status = 'loading'; 

      this._directiveService.getPhasesDirective(this.directiveInput.id) 
       .then(phases => this.extractPhases(phases)); 


     } 

    } 

    onAddHours(event:number){ 

     this.totalHoursPhase = event; 
     console.log('horas desde el 3',this.totalHoursPhase); 
    } 

    extractPhases(phases: any):void{ 
     this.PhasesForDirective = phases; 
     console.log(phases); 
     this.status = 'active'; 
    } 

} 

child.component.html

 <div *ngFor="let tv of FlyTypesList" class="row tuplaRow"> 
        <div class="col-sm-4"> 
         orden 
         <input id="{{tv.id}}" type="text" value="{{tv.order}}" class="form-control type"> 

        </div> 
        <div class="col-sm-4">tipo de vuelo 
         <input type="text" value="{{tv.type}}" class="form-control type" disabled> 

        </div> 
        <div class="col-sm-4">Horas <input #inputHours type="text" id="{{tv.id}}" value="{{tv.hours}}" (click)="updateHoursTV($event, inputHours)" class="form-control totalNumberTV"></div> 

       </div> 
<div class="row tuplaRow" *ngIf="creatingNew"> 
        <h4>Agregar tipo de vuelo</h4> 
        <pre>{{addNewTypeForm.value | json }}</pre> 

        <form #addNewTypeForm="ngForm" (submit)="onSubmit($event, addNewTypeForm.value)"> 
         <div class="row tuplaRow"> 
         <div class="col-sm-4"> 
          orden 
          <input #order [(ngModel)]="newTypePhase.order" name="order" type="text" placeholder="Ingrese el orden" class="form-control type"> 

         </div> 
         <div class="col-sm-4">tipo de vuelo 
          <select #type [(ngModel)]="newTypePhase.name" name="name" class="phasesSelect"> 
           <option *ngFor="let option of options" value="{{option.id}}" id="{{option.id}}">{{option.name}}</option> 
          </select> 

         </div> 
         <div class="col-sm-4">Horas <input [(ngModel)]="newTypePhase.hours" name="hours" #hours type="text" placeholder="0" required class="form-control totalNumberTV"></div> 

        </div> 
        <div class="row"> 
         <div class="col-sm-12"> 
          <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok-sign"></i>Guardar</button> 
         </div> 
        </div> 
        </form> 

      </div> 

     </div> 

     <div class="col-sm-2"> 
      <button class="btn btn-info newTypeFlight" (click)="addNewForm()">Nuevo</button> 
     </div> 

    </div> 

</div> 

child.component.ts

export class FlyTypesComponent implements OnInit, OnChanges { 

    options: TypeFlightModel[]; 

    @Input() phaseID: number; 
    private FlyTypesList:Array<TypeFlightPhaseModel>; 

    private newTypePhase: TypeFlightPhaseModel = new TypeFlightPhaseModel(); 
    private creatingNew: boolean = false; 



    private totalHoursPhase: number; 

    @Output() AddHours = new EventEmitter<number>(); 

    constructor(private dragulaService: DragulaService, 
       private _directiveService: directiveService) {} 


    ngOnInit() { 
     this.totalHoursPhase = 0; 
     this.getDataTypeFligth(); 



    } 

    updateHoursTV(event: any, inputHours: HTMLElement):void{ 
    } 

    addNewForm(){ 
     this.creatingNew = true; 
    } 

    ngOnChanges() { 
    } 

    private getDataTypeFligth(){ 
     this._directiveService.getTypeFligthPhase(this.phaseID) 
      .then(response => { 
       response.forEach(itemPhase => { 
        this.totalHoursPhase += itemPhase.hours; 
        console.log(this.totalHoursPhase); 
       }); 

       this.AddHours.emit(this.totalHoursPhase); 
       this.FlyTypesList = response; 
       this.options = response[0].Types; 

     });  
    } 
    onSubmit(event, formValue):void{ 
     event.preventDefault(); 

     let newTV = new TypeFlightPhaseModel(); 


     this._directiveService.addTypeFlightToPhase(this.phaseID, formValue.name, formValue.hours) 
      .then(response => { 
       console.log(response) 
       newTV.hours = formValue.hours; 
       newTV.type = formValue.name; 
       newTV.order = 1; 
       this.FlyTypesList.push(newTV); 
       this.AddHours.emit(formValue.hours); 
      }); 



    } 

} 

基本上我想，当我创建了孩子的组件形式的新元素，它仅更新与父一个值。

一些帮助将是伟大的！

Answer 1

您可以通过服务来完成。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service