在Angular 2中捕获ng-content上的事件

Question

我正在阅读本教程以理解角2 ng-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成一个div,以避免造型的问题.谢谢.Plnkr

Answer 1

您可以通过将事件侦听器绑定到具有主机声明的组件元素来实现完全相同的结果。

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

}

Answer 2

您可以使用@ContentChild来捕获投影组件的事件。

孩子：

@Component({
moduleId: module.id,
selector: 'card-child',
template: `
<div>Card Child component</div>
`
})
export class CardChildComponent {
     @Output customEvent:EventEmitter = new EventEmitter()
}

家长：

@Component({
moduleId: module.id,
selector: 'card',
template: `
<ng-content></ng-content>
`
})
export class CardComponent {
    @ContentChild(CardChildComponent) childComp: CardChildComponent;

    ngAfterContentInit() {
        this.childComp.addEventListener("click", ()=>{console.log("clicked"});
        //Below is handling of custom event
        this.childComp.customEvent.subscribe(()=>{console.log("clicked"});
    }
}

以下是组件的注入方式。

<card>
<card-child></card-child>
</card>

Answer 3

<ng-content>只是一个占位符，用于嵌入组件标签内的内容。Angular 取代了它。

避免使用该DIV解决方案的唯一选择是创建您自己的ng-content.

基本上，您只需创建一个空组件，然后在模板中仅放置一个<ng-content>标签。如果您调用该组件AppContentComponent（应用程序内容），那么您可以在组件中，

<app-content (click)="onClick()">
   <ng-content></ng-content>
</app-content>

当然，这有点复杂，您最终将嵌入的内容包装到另一个标签中（不是 a <div>，而是 an <app-content>），不过，当然，最初您并不介意内容被 an 包装<ng-content>，所以我想它可能为你工作。