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()');
}
...

请注意，参数是索引本身，而不是一个可观察对象。

希望对您有所帮助。祝你好运。