如何从angular2中的子组件更新父组件

发布时间：2020-12-17 17:41:53 所属栏目：安全来源：网络整理

导读：我在Angular2中寻找AngularJS ISolated(= operation)范围的类似功能. 我想更改子组件中的父组件值,以便我不需要使用任何EventEmitters. 以下是我的代码片段. component-1div *ngFor="let row of listArray" component-2 [inputData]="row.inputData" (output

我在Angular2中寻找AngularJS ISolated(= operation)范围的类似功能.
我想更改子组件中的父组件值,以便我不需要使用任何EventEmitters.

以下是我的代码片段.

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

我将更改组件-2中的[inputData]值,该值应反映在组件-1中.
在现有的@Output eventEmitter中,我无法找到哪个元素值已更改.

解决方法

在这里,我向您展示如何识别您正在处理的元素的索引以及如何为正在处理的元素分配新值.

为row.inputData分配一个新值我正在处理与@Input xxx的TWO-WAY数据绑定;和@Output xxxChange语法.

要识别您正在处理的元素的索引,我只是使用新的@output api.

冷静地观察这段代码.

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

组件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
    }
}

工作演示：https://plnkr.co/edit/SqrfhtZZlSIsQE0Ko0oC?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!