在 Angular 2 中捕获 ng-content 事件

我正在经历本教程 https://scotch.io/tutorials/angular-2-transclusion-using-ng-content理解角度 2ng-content。我想捕获触发的事件ng-content。我有以下组件：

@Component({
    moduleId: module.id,
    selector: 'card',
    template: `
    <ng-content (click)="onClick($event)"></ng-content>
    `
})
export class CardComponent {

    onClick(){
        console.log('clicked');
    }
}

在这里，正如你所看到的，我正在设置一个监听器click事件。但由于某些原因它没有触发。好像整个ng-content标签被替换。因此，为了捕获当前的事件，我正在这样做：

template: `
    <div (click)="onClick($event)">
      <ng-content></ng-content>
    </div>
    `

有没有更好的方法来做到这一点？因为我不想包裹我的ng-content into a div以避免样式问题。谢谢。Plnkr https://plnkr.co/edit/J0JROxAzVVUf57EhX4aX?p=preview

通过使用主机声明将事件侦听器绑定到组件元素，您可以实现几乎相同的结果。

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'card',
  template: `<ng-content></ng-content>`
})
export class ButtonComponent {

  @HostListener('click', ['$event.target'])
  onClick(target) {
    console.log('Clicked on: ', target);
  }

}