Question

我的用例要求我以编程方式将一个子组件的多个副本添加到模板中（想一想：使用*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）传递，我该如何访问我的类实例？欢迎任何反馈。

Answer 1

如果直接传递方法引用，那就是默认的JS / TS行为。您可以使用bind之类的methodName.bind(this)或像() => methodName()这样的胖箭头功能来保留此范围。

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

即可

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

到

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

Plunker example

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

1 个答案: