如何使对象属性函数成为事件发射器

How to make an object property function into an eventemitter?

本文关键字：事件 发射器 函数 何使 对象 属性      更新时间：2024-04-24

这是关于组件之间函数引用的问题的后续。

如果我有ParentComponent:

export class ParentComponent {
  public myParentVariable = 'Hello world';
  test() {
    console.log(this.myParentVariable);
  }
  public options: any[] = [
    {label: 'Item 1', onClick: this.test},
    {label: 'Item 3', onClick: this.test},
    {label: 'Item 6', onClick: this.test},
    {label: 'Item 2', onClick: this.test}
  ];
}

如您所见，我在onClick属性中传递了对test的引用。

然后我有一个ChildComponent，我将options从ParentComponent:传递到它

<child [options]="options"></child>

在child中，我有一个列表：

<ul class="dropdown-list">
  <li *ngFor="#option of options" (click)="option.onClick()"></li>
</ul>

正如您在模板中所看到的，然后我将之前的onClick称为(click)="option.onClick()"。

现在的问题是，从这里开始，它不再知道this.myParentVariable是什么，因为我们只是传递对test的引用。因此，我想把onClick变成EventEmitter，然后我可以在上面调用.emit()，这样我们就可以使用正确的数据绑定来执行test，如图所示。

但是，由于我传递了一个包含对象的数组，该数组包含引用函数的属性，所以我不太确定如何使每个对象的单个onClick属性成为EventEmitter。

我试着把整个options变成一个输出的EventEmitter，但失败得很惨。

关于如何实现这一点，有什么想法吗？

JavaScript中的这个关键字取决于上下文。在大多数情况下，这个值由函数的调用方式决定。由于TypeScript是JavaScript的类型化超集，它的行为相同，请遵循下面的链接。

ECMAScript 5引入了Function.prototype.bind。调用f.bind（someObject）会创建一个与f具有相同主体和作用域的新函数，但在原始函数中出现这种情况的情况下，在新函数中，无论函数如何使用，它都会永久绑定到bind的第一个参数。

函数的这个关键字，绑定方法

您也可以使用箭头函数作为替代。

通过将父函数传递给子函数，可以将父组件与子组件紧密耦合（通常不建议这样做）。换句话说，您正在向子对象透露有关父方法的信息。理想情况下，孩子不应该了解父母的任何情况。（这使（子）组件更加可重用。）

与您当前的方法不同，即，不将父函数引用传递给子函数，而是传递一些ID或其他一些唯一值。当点击事件发生在子对象中时，将ID或唯一值传递回父对象（使用输出属性/EventEmitter）：

<li *ngFor="#option of options" (click)="myEmitter.emit(option.uniqueValue)"></li>

然后在父级中，将该值映射到适当的函数调用并调用它：

<child [options]="options" (myEmitter)="doWork($event)"></child>

doWork(uniqueValue) {
   // map uniqueValue to some function and call it
}

这种方法的另一个好处是，您不必处理this上下文。

相关文章：