Wie update Elternkomponente von Kind-Komponente in angular2

Question

Ich bin auf der Suche nach AngularJS ISolated (= Operation) Umfang ähnliche Funktion in Angular2.

Ich möchte den Wert der Elternkomponente in der untergeordneten Komponente ändern, so dass ich keine EventEmitter verwenden muss.

Folgendes ist mein Code-Snippet.

<component-1> 
<div *ngFor="let row of listArray" > 
    <component-2 [inputData]="row.inputData" (outputEvent)= "onComponentChange($event)"> </component-2> 
</div> 
<component-2 [inputData]="inputData2" (outputEvent)= "onComponentChange($event)"> </component-2> 
<component-2 [inputData]="inputData3" (outputEvent)= "onComponentChange($event)"> </component-2> 
<component-2 [inputData]="inputData4" (outputEvent)= "onComponentChange($event)"> </component-2> 

@Component 
component-1{ 
    onComponentChange(newValue){ 
     //where to keep the new value 
     //this.inputData2/inputData3/inputData4/listArray[i].inputData ??????????? 
    } 
} 


@Component 
component-2{ 
    @Input() inputData:string; 
    @Output() outputEvent:EventEmitter<string>; 
    changeComponentValue(newValue){ 
     this.outputEvent(newValue); 
    } 
} 

I wird [EingDaten] -Wert in Komponente-2 ändern, die in der Komponente-1 widerspiegeln.
Im vorhandenen @Output eventEmitter kann ich nicht herausfinden, welcher Elementwert geändert wurde.

Answer 1

Hier zeige ich Ihnen, wie Sie einen Index eines Elements identifizieren, mit dem Sie es zu tun haben, und wie Sie einem Element, mit dem Sie es zu tun haben, einen neuen Wert zuweisen.

Um einen neuen Wert zu row.inputData Ich bin den Umgang mit BIDIREKTIONALE Datenbindung mit @Input xxx zuweisen; und @Output xxxChange Syntax.

Um Index eines Elements zu identifizieren, das Sie beschäftigen, verwende ich nur eine neue @output api.

beobachten Sie diesen Code ruhig.

@Component({ 
    selector: 'my-app', 
    directives:[ChildComponent], 
    template:`<h1>My First Angular 2 App</h1> 
    <div *ngFor="let row of listArray" > 
    {{row.inputData}} 
    <component-2 [(inputData)]="row.inputData" (outputEvent)= "onComponentChange($event)"> </component-2> 
    </div> 
    ` 
}) 
export class AppComponent { 
title="Angular1"; 

listArray=[{inputData:"micronyks"},{inputData:"micronyks1"},{inputData:"micronyks3"}]; 

onComponentChange(value){ 
    console.log(value); 
    this.listArray.forEach((item,index)=>{ 
    if(item.inputData==value){ 
     console.log(index); 
    } 
    }) 
} 
} 

Komponente-2

import { Component, Input,Output,EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'component-2', 
    template:`<button (click)="changeComponentValue(inputData)">Click-{{inputData}}</button>` 
}) 
export class ChildComponent { 
    @Input() inputData; 
    @Output() outputEvent:EventEmitter<string>=new EventEmitter(); 
    @Output() inputDataChange=new EventEmitter(); 

    changeComponentValue(value){ 
     this.outputEvent.emit(value); //<---this will identify element index you are dealing with 
     this.inputDataChange.emit("Angular2"); //<----new value will be assinged to an element that you are dealing with 
    } 
} 

Arbeits Demo: https://plnkr.co/edit/SqrfhtZZlSIsQE0Ko0oC?p=preview