cách cập nhật thành phần cha mẹ từ thành phần con trong angular2

Question

Tôi đang tìm AngularJS ISolated (= hoạt động) phạm vi tính năng tương tự trong Angular2.

Tôi muốn thay đổi giá trị thành phần gốc trong thành phần con, để tôi không cần phải sử dụng bất kỳ EventEmitters nào.

sau đây là đoạn mã của tôi.

<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); 
    } 
} 

tôi sẽ thay đổi [inputData] giá trị trong thành phần 2, mà nên phản ánh trong phần-1.
Trong @Eutput eventEmitter hiện tại, tôi không thể tìm thấy giá trị phần tử nào đã thay đổi.

Answer 1

Ở đây tôi đang chỉ cho bạn cách xác định chỉ số của phần tử bạn đang xử lý và cách gán giá trị mới cho phần tử bạn đang xử lý.

Để gán một giá trị mới cho row.inputData Tôi đang làm việc với dữ liệu hai chiều ràng buộc với @Input xxx; và cú pháp @Output xxxChange.

Để xác định chỉ số của phần tử bạn đang xử lý, tôi chỉ đang sử dụng @ apput mới.

quan sát mã này một cách bình tĩnh.

@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); 
    } 
    }) 
} 
} 

phần-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 
    } 
} 

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