Angular 2＆Typescript：无法从事件处理程序访问类实例

Question

Angular 2＆Typescript：无法从事件处理程序访问类实例

6

我的用例要求我在模板中以编程方式添加多个子组件的副本（例如：使用“* ngFor =”let childComponent of componentArray“”循环遍历数组）。这些子组件都会发出“select”事件；问题在于，每个组件在父组件中具有不同的事件处理程序。为了聪明一点，我决定将每个componentArray成员的事件处理程序存储为属性。因此，我的模板现在类似于：

<my-cmp *ngFor="let childComponent of componentArray" (select)="childComponent.callback()"></my-cmp>

我的模型包含：

componentArray = [{data:0, callback:this.onSelect0}, {data:1, callback:this.onSelect1}];

onSelect0(){/*do stuff specific to childComponent 0*/}
onSelect1(){/*do stuff specific to childComponent 1*/}

callback是一个类方法的引用，我希望该特定childComponent的select事件能够触发它。 callback被正确触发；问题在于，从其中我无法访问组件中的其余部分，因为在循环的那个迭代中，this在该上下文中指的是component。

听起来比实际情况更加混乱。我已经找到了一个解决方法，但它似乎非常笨重（我在componentArray的每个成员中将类实例存储为一个属性）。我制作了一个可从http://plnkr.co/edit/VxxCR8hjUsxQ3SABWe8E?p=preview访问的plunkr。基本上我的问题是：如果我将事件处理程序作为对象属性传递（如上所示childComponent.callback），那么我怎样才能访问我的类实例？欢迎任何反馈。

- BeetleJuice

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Günter Zöchbauer · Accepted Answer

如果您直接传递方法引用，则这是默认的JS/TS行为。您可以使用bind，例如methodName.bind(this)或者使用箭头函数，例如() => methodName()来保留this的作用域。

在您的Plunker中，只需更改此行即可：

  private thing = {name:'ThingOne', onSelect: this.handlerOne };

to

  private thing = {name:'ThingOne', onSelect:() => this.handlerOne() };

Plunker 示例