Question

NB。问题不是如何使其起作用（自从我可以做到，如底部所述）。这与为什么可以使它以这种方式起作用，而其他方式无关。

我已经设计了这样的组件。这是一个数据行，可以保留许多数据行。因此，在每个这样的实例中，我们都有 onRemoval （当用户单击删除图标时调用）以及 onRemove （当听到发出的偶数时调用）。 / p>

@Output() remove: EventEmitter<number> = new EventEmitter<number>();
...
onRemoval() {
  console.log("being removed: " + this.id);
  this.remove.emit(this.id);
}
onRemove(id: number) {
  console.log("removing: " + id);
  if (!id)
    return;

  this.subRows.splice(id, 1);
}

我确定我缺少一些愚蠢的东西，但是当我尝试调试它时，令我感到困惑的是发射的值是正确的索引，而接收到的值不是。 未定义。

我尝试过的标记的相关部分如下所示。我也尝试过使用空的寄生虫，也没有空的寄生虫。

<div *ngIf="unfolded">
  <app-data-row *ngFor="let subRow of subRows"
                (remove)="onRemove(id)"
                [config]="subRow"></app-data-row>
</div>

我已经对此进行了谷歌搜索，但据我所知，我已经通过使用 EventEmitter 遵循了正确的方法。另外，似乎设置可以在事件被发射和接收到的范围内起作用。似乎只是 id 值设置不正确。

使其生效的唯一方法是精确地调用变量 $ event 。是我在做些愚蠢的事情还是所需的语法？我的意思是，甚至* $ id $都没有帮助...

Answer 1

在模板中，将子级的输出连接到组件的回调时：$event是发射值的名称，没有办法解决。毕竟：调用处理程序不需要将输出作为唯一的参数。你可以的，不知道，

<app-data-row *ngFor="let subRow of subRows" (remove)="onRemove(subRow.id)">

或

<app-data-row *ngFor="let subRow of subRows" (remove)="onRemove(subRow.id, $event)">

或

<app-data-row *ngFor="let subRow of subRows" (remove)="onRemove($event, subRow.id)">

等等，依此类推。因此，在模板的此处，需要$event作为实际输出值的标识符。

Answer 2

$event是使用组件/指令的@Output事件发射器时的事件本身，该事件发射器发出该值，并由带有$event变量的回调函数捕获。

当您使用括号将事件监听器定义为

时

(remove)="onRemove($event)"

您实际上传递了方法参考。您不需要之前定义的局部变量。 Angular本身将$event值替换为发出的值。但是，如果您这样做

(remove)="onRemove(id)"

它认为id是局部变量，例如您在*ngFor="let id of idList"中定义的

简而言之，这是使用组件/指令的输出事件发射器时捕获发射值的唯一方法。

您可以查看以下官方文档：https://angular.io/guide/user-input

还有这个SO线程：What exactly $event object do in Angular 2?

不能使用$ event以外的任何其他变量名称来接收Angular中发出的数字

2 个答案: