Angular 通过 @Output() 将参数传递给父组件

Question

我有两个组件，我们称它们为 contianer 和 itemList。itemList 有可点击的项目，我需要将点击事件（包括被点击项目的索引）传递给容器。

itemList.ts：

...
@Output()
itemClicked = new EventEmitter<number>();

@Output()
somethingElse = new EventEmitter<void>();

...
this.itemClicked.emit(index);
...
this.somethingElse.emit();
...

容器.html：

...
<itemList (itemClicked)="itemClicked($index)"
          (somethingElse)="somethingElse()" ... >
  ...
</itemList>
...

容器.ts：

...
itemClicked(observer: Observer<number>): void {
  // where do I get the index from ?
  console.debug('itemClicked( #' + index + ')');
}

somethingElse(observer: Observer<void>): void {
  console.debug('somethingElse()');
}
...

问题是container.ts：我从哪里获取索引？

来自的事件somethingElse已成功传递到容器，因此这不可能是完全错误的。事实上，这就是我试图构建 itemClicked 的模式。但我无法将签名更改itemClicked(...)为正确且有效的版本。

Answer 1

我相信您的问题出在容器模板中，您试图在其中尝试获取不存在的 $index 。您应该使用$event。

...
<itemList (itemClicked)="itemClicked($event)"
      (somethingElse)="somethingElse()" ... >
  ...
</itemList>

...

这应该允许您访问从 itemClicked 发出的值。然后在容器组件中，您可以访问其 itemClicked 函数中的索引：

...
itemClicked(index: number): void {
  // the index will appear here
  console.debug('itemClicked( #' + index + ')');
}

somethingElse(): void {
  // You didn't pass any argument here
  console.debug('somethingElse()');
}
...

请注意，参数是索引本身，而不是可观察的。

希望有帮助。祝你好运。