Nehmen wir an, ich habe diese einfache Listendarstellungskomponente:

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

Ich benutze es so:

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

So weit, ist es gut

Nächste Ich beschließe, dass der Benutzer seine eigene Vorlage für die gerenderten Elemente bereitstellen kann. Daher ändere ich die Komponente

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

Und benutze es so:

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

Dies funktioniert nur, ich binde keine Event-Handler an die Listenelemente Plunker). Wenn ich wie in der ersten Version der Komponente versuche, eine Bindung an das click -Ereignis herzustellen, gibt Angular die folgende Ausnahme aus:

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

Hier ist einplunker zeigt, dass. Sie können die Klickbindung löschen und es wird funktionieren.

Wie behebe ich das? Ich möchte nur, dass der Benutzer eine Vorlage für ein untergeordnetes Element angeben kann, das ich über ngFor durchlaufen werde, aber ich muss in der Lage sein, Handler an diese Elemente zu binden.