从子组件调用父函数

Posted 2023-02-23

【中文标题】从子组件调用父函数

【英文标题】：Calling parent functions from child component

【发布时间】：2020-03-25 02:20:00

【问题描述】：

我有以下结构。

ParentComponent.ts

reset(offense) 
    return this.http.post(...);
   

ParentComponent.html

<ion-list>
    <swipable-offense-card
        *ngFor="let offense of filteredOffenses"
        [offense]="offense"
        (onReset)="reset(offense)"
        >
    </swipable-offense-card>
</ion-list>    

和孩子： ChildComponent.ts

@Component(
    selector: 'swipable-offense-card',
    templateUrl: 'swipable-offense-card.html',
  )
  export class SwipableOffenseCard 
    @Input() offense: Offense;
    @Output() onReset: EventEmitter<any> = new EventEmitter();

    reset() 
      this.onReset.emit();
    
  

ChildComponent.html

<p> offense.title </p>
<button (click)="reset()"></button>

现在，通过这种结构，我在此处传递的攻击参数(onReset)="reset(offense)" 正在发送到父组件。不过，我更喜欢做这样的事情。

ChildComponent.ts

reset() 
    this.onReset.emit(
       ...this.offense
    );

但是这个没有发送任何参数来重置父组件的方法。我如何在 Angular 中做到这一点？

【问题讨论】：

【参考方案1】：

你必须在这样的参数中添加$event

// ParentComponent.html
<ion-list>
  <swipable-offense-card
     *ngFor="let offense of filteredOffenses"
     [offense]="offense"
     (onReset)="reset($event)"
     >
 </swipable-offense-card>
</ion-list>

这是https://stackblitz.com/edit/angular-dkfxb2的例子