将方法传递给子组件

Question

我遇到错误：

ERROR TypeError: _co.deleteFile is not a function

我以为这是可能的，但是找不到任何资源。在React中，这是可能的。

这是我父组件中的方法：

public deleteFile(f: File) {
   this.fileState.delete(f.name); }

模板：

<app-file *ngFor="let file of files" [file]="file" (deleteFile)="deleteFile(file.name)"></app-file>

最后是我的文件（子）组件：

@Input() deleteFile: () => void;

它是HTML：

<button type="button" mat-stroked-button color="warning" (click)="deleteFile(file.name)">Delete file</button>

我在这里做什么错了？

编辑：

@penleychan为我指明了正确的方向。相反，我实现了一个事件发射器，如下所示：

file.component：

@Output() deleted = new EventEmitter<string>();

HTML：

<button type="button" mat-stroked-button color="warning" (click)="delete()">Delete file</button>

父HTML：

<app-file *ngFor="let file of files" [file]="file" (deleted)="onDelete($event)"></app-file>

谢谢。看来我只是误解了如何实现这一点。

Answer 1

您尚未传递deleteFile作为输入。您仅从孩子发出deleteFile事件。请注意，[]使用@Input()，()使用@Output()（或任何其他事件）。