从子组件调用父函数

Question

我有以下结构。

父组件.ts

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

父组件.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();
    }
  }
}

子组件.html

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

现在，使用这个结构，我在这里传递的攻击参数(onReset)="reset(offense)"被发送到父组件。 但是，我更喜欢做这样的事情。

子组件.ts

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

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

Answer 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