Question

目前，我正在为我的学校项目使用角度4。我有一个数组，每个项目都是一个子组件，可以更新和删除，这意味着我应该知道索引和数据。

parent.ts：

updOne(i:number,stc:string):void{
    this.myarray[i]=stc
}
delete(edu:string):void{
    this.myarray=this.myarray.filter(x=>x!==edu)
}

parent.html：

<child-com [edu]=x [num]=i (updstr)="updOne($event)" (delstr)="delete($event)"></child-com>

子-com.ts：

@Input() edu:string
@Input() num:number
@Output() updstr: EventEmitter<string> = new EventEmitter<string>()
@Output() delstr: EventEmitter<string> = new EventEmitter<string>()

//some other code here

save():void{
    this.updstr.emit(this.edu)
    this.updating=false
}
del():void{
    this.delstr.emit(this.edu)
}

删除效果很好，毫无疑问。问题是更新。实际上，使用* ngFor，trackBy并手动打印，可以解决这个问题。但我想尝试使用子组件，就像在React中一样。当我玩反应时，我可以使用javascript闭包，即myfunc.bind（this，i，stc）。

我在这里尝试过使用bind，没有结果

使用bind时的

代码：
parent.ts：

@Output() updstr: EventEmitter<number,string> = new EventEmitter<number,string>()

parent.html：

//I've tried some order
//this,i,$event
//$event,this,i
<child-com [edu]=x (updstr)="updOne.bind(this,$event,i)" (delstr)="delete($event)"></child-com>

打字稿中的泛型不允许多个数据，所以我不能发出多个数据

所以我的问题是，如何使用emit或bind将一些数据从child传递给parent？

Answer 1

感谢Alex，使用对象可以替代多个数据传递。为了确保数据正确，使用了一个类似的接口

export interface Interview{
    num:number
    payload:{
        dt:string
        seeker:string
    }
}

并像

一样使用它

@Output() updstr: EventEmitter<Interview> = new EventEmitter<Interview>()

如何将多个数据从子组件传递回父组件？

1 个答案: