Angular 触发父组件父节点方法的子组件输出事件

我在子组件中使用

@Output

来触发父组件中的目标方法。当我在子组件中单击

（单击）=“viewPromotionDetails（'Learn more'）”

时，它也会触发

（单击）=“description（）”

有人能帮我解决这个问题吗

我还创造了

提前谢谢

child.component.html

<div>
    <div>Name </div>
    <div>Description </div>
    <div class="lear-more" (click)="viewPromotionDetails('Learn more')">Learn More</div>
</div>

    <div class="description" (click)="description()">
        <my-child (leanMore)="callLearnMore($event)"></my-child>
    </div>

---

看看您的父HTML：

<div class="description" (click)="description()">
    <my-child (leanMore)="callLearnMore($event)"></my-child>
</div>

然后在父组件模板文件中，删除

（单击）=“description（）”

，并将其添加到

我的孩子

<div class="description">
    <my-child (leanMore)="callLearnMore($event)" (description)="description()"></my-child>
</div>

然后，最后在child-component.html中，向

描述

元素添加一个单击侦听器。因此，模板文件应如下所示：

<div>
    <div>Name </div>
    <div (click)="description.emit()">Description </div>
    <div class="lear-more" (click)="viewPromotionDetails('Learn more')">Learn More</div>
</div>

名称
描述
了解更多

---

希望这能帮助您并解决您的问题。

您可以在viewPromotionDetails（“了解更多”）中尝试e.stopPropagation（）。您的stackblitz不起作用。

我会尝试将

div.lear-more

转换为

按钮

元素。Div将其单击事件传播到它的祖先（到根元素）。

谢谢您的回答。很抱歉stackblitz我已经更新了。e、 stopPropagation（）不工作。

<div>
    <div>Name </div>
    <div (click)="description.emit()">Description </div>
    <div class="lear-more" (click)="viewPromotionDetails('Learn more')">Learn More</div>
</div>