13

我正在阅读本教程以理解 angular 2's 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成 adiv以避免样式问题。谢谢。PLNKR

4

3 回答 3

8

您可以通过将事件侦听器绑定到具有主机声明的组件元素来获得几乎相同的结果。

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

}
于 2018-06-01T13:32:50.640 回答
4

您可以使用@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>
于 2020-10-23T13:08:51.527 回答
0

<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>所以我想它可能为你工作。

于 2018-03-15T09:34:54.503 回答