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

【问题标题】：Why angular event emitter doesn't work when component is nested inside other component?当组件嵌套在其他组件中时，为什么角度事件发射器不起作用？
【发布时间】：2021-08-08 20:54:39
【问题描述】：

在卡片组件 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>

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

【问题讨论】：

标签： angular angular-event-emitter ng-content

【解决方案1】：

您应该在 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>

【讨论】：

或者您可以创建一个隐藏类并显示或使用带有变量的 ngHide 或 ngShow - ngClass 是最干净的，因为您可以使用 css visibility: hidden 并将隐藏类的高度设置为 0。
是否可以在 div 或 ng-container 上调用事件发射器？我不这么认为。
是的 - 但更好的方法是使用 ngClass 和布尔运算符来设置类 [ngClass]="yourtruthyvariable ? 'show':'hide'" 或一些差异 - 它更干净，一个可以监听来自组件的事件。
@Nikolay 我们不知道什么会调用事件发射器——或者他是否在组件端有某种主机绑定。我假设他做到了——而且这是一大段代码的一小部分——也许我错了——它发生了。