如何在不改变父角2的兄弟姐妹的情况下修改父母的成分

Question

i'在当前儿童组件的父母中更新属性有问题时，我面临的行为是，当我尝试从父母中修改/更新父母的属性时孩子组成部分不仅是父母，但父母的兄弟姐妹也会改变，我在做什么错，我该如何才能更新孩子的父母？

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