当组件嵌套在其他组件中时，为什么 Angular 事件发射器不起作用？

问题描述

在卡片组件 html 中，我有 ng-content，我将卡片项目组件放在卡片组件中。 为什么在这种情况下我不能发出值？.

示例 1.

card.component.html

  <div>
      <ng-content>
  </div>

---

    <card>
       <card-item (closeEmitter)="onClose($event)">
       </card-item>
    </card>

如果我将 car-item 组件移到卡片组件之外，则事件发射器工作正常。

示例 2。

card-item.component.html

<div>
  <div class="card-header"> header </div>
  <div class="card-body"> content </div>
  <div class="card-footer"> footer</div>  
</div>      
 

---

<card></card>
<card-item (closeEmitter)="onClose($event)"></card-item>

有没有办法像第一个例子一样发出值？

解决方法

您应该在 html 元素或 ng-container 上调用事件发射器。

<ng-container (closeEmitter)="onClose($event)">
<card-item></card-item>
</ng-container>. or on an html element 
<div (closeEmitter)="onClose($event)">
<card-item></card-item>
</div>