在 Angular 2 中使用 ngForTemplate 时绑定事件

假设我有这个简单的列表渲染组件：

import {Input, Component } from 'angular2/core'

@Component({
  selector: 'my-list',
  template: `
      <div *ngFor='#item of items' (click)='onItemClicked(item)'>
          {{item}}
      </div>
  `
})
class MyList {
    @Input() items: string[];

    onItemClicked(item) { console.log('Item clicked:', item); }
}

我这样使用它：

  <my-list [items]='myAppsItems'></my-list>

到目前为止，一切都很好。

接下来，我决定希望用户能够为渲染的项目提供自己的模板，因此我更改了组件

@Component({
  selector: 'my-list',
  template: `
      <template ngFor [ngForOf]="items" [ngForTemplate]="userItemTemplate" (click)='onItemClicked(item)'>
      </template>
  `
})
class MyList {
    @Input() items: string[];
    @ContentChild(TemplateRef) userItemTemplate: TemplateRef;

    onItemClicked(item) { console.log('Item clicked:', item); }
}

并像这样使用它：

<my-list [items]='items'>
   <template #item>
        <h1>item: {{item}}</h1>
   </template>
</my-list>

这仅适用于我不将任何事件处理程序绑定到列表项（plunker http://plnkr.co/edit/EJEhVYbX2qmFelTOu2pB?p=preview）。如果我尝试绑定到单击事件，就像我在组件的第一个版本中所做的那样，Angular 会抛出以下异常：

"Event binding click not emitted by any directive on an embedded template"

这是一个笨蛋表明 http://plnkr.co/edit/VMO27qpDY64LODAQjH9X?p=preview。您可以删除点击绑定，它就会起作用。

我该如何解决？我只希望用户能够为我将通过 ngFor 进行迭代的从属项目指定模板，但我需要能够将处理程序绑定到这些项目。

一周来一直在寻找这个问题的答案，我终于想出了一个相当不错的解决方案。我建议不要使用 ngForTemplate，而是使用 ngTemplateOutlet。

这里已经描述得很好了：angular2 将数据从“[ngTemplateOutlet]”反馈回“” https://stackoverflow.com/questions/37654004/angular2-feeding-data-back-to-template-from-ngtemplateoutlet

列表项的自定义模板放置在组件标签之间：

<my-list>
  <template let-item="item">
    Template for: <b>{{item.text}}</b> ({{item.id}})
  </template>
</my-list>

以及组件模板：

<ul>
  <li *ngFor="let item of listItems" (click)="pressed(item)">
    <template 
      [ngTemplateOutlet]="template" 
      [ngOutletContext]="{
        item: item
      }">
    </template>
  </li>
</ul>

我在这里举了一个例子：https://plnkr.co/edit/4cf5BlVoqzZdUQASVQaC?p=preview https://plnkr.co/edit/4cf5BlVoqzZdUQASVQaC?p=preview