Question

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

itemList.ts：

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

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

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

container.html：

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

container.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(...)的签名更改为正确且有效的版本。

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

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

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

Answer 2

您在Output中收到的参数称为自定义事件。因此，您需要接收public async Task<IEnumerable<T>> ListEntityAsync(Expression<Func<T, bool>> predicate) { // Filter against a property that's not partition key or row key TableQuery<T> query = new TableQuery<T>().Where(predicate); var results = _table.ExecuteQuery(query); return results.ToList(); }，并且该事件的类型与从子组件传递的类型相同。

$event

通过@Output（）将角度传递参数传递给父组件

2 个答案: