Question

这是this问题的后续问题，该问题涉及组件之间的函数引用。

如果我有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}
  ];
}

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

然后我有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，如图所示{{3} }}

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

我尝试将整个options变成输出的EventEmitter但是却失败了。

关于如何实现这一目标的任何想法？

Answer 1

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

而不是当前的方法，即不传递父函数引用给孩子，而是传递一些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上下文。

Answer 2

JavaScript中的此关键字取决于上下文。在大多数情况下，其值取决于函数的调用方式。由于TypeScript是JavaScript的类型超集，因此行为相同，请点击以下链接。

ECMAScript 5引入了Function.prototype.bind。调用f.bind（someObject）创建一个具有与f相同的主体和范围的新函数，但是在原始函数中发生这种情况时，在新函数中它永久地绑定到bind的第一个参数，无论函数是如何被使用。

function's this keyword，bind method

您也可以使用箭头功能替代。

如何将对象属性函数变成eventemitter？

2 个答案: