Digamos que eu tenho esse componente simples de renderização de lista:

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); }
}

Eu uso assim:

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

Por enquanto, tudo bem.

Em seguida, decido que desejo que o usuário possa fornecer seu próprio modelo para os itens renderizados, então altero o componente

@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); }
}

E use-o assim:

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

Isso funciona apenas. Não vinculo nenhum manipulador de eventos aos itens da lista (plunker) Se eu tentar ligar ao evento click, como fiz na primeira versão do componente, o Angular lança a seguinte exceção:

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

Aqui está umplunker mostrando que. Você pode excluir a ligação de clique e ela funcionará.

Como faço para corrigir isso? Eu só quero que o usuário possa especificar um modelo para um item subordinado que eu irei iterar via ngFor, mas eu preciso poder vincular manipuladores a esses itens.