从子组件调用父函数答案

【问题标题】：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 中做到这一点？

【问题讨论】：

```
reset() { this.onReset.emit({ ...this.offense }); }
```
具有这种结构。您的父函数正在触发？（不管参数）

标签： angular typescript ionic-framework ionic3

【解决方案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的例子

【讨论】：