Question

我在子组件中使用@Output来触发父组件中的目标方法。当我在子组件中单击(click)="viewPromotionDetails('Learn more')"时，也会触发(click)="description()"

有人可以帮我解决问题吗

谢谢。

child.component.html

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

父组件HTML：app.component.html

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

Answer 1

看看您的父HTML：

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

当某人单击my-child时，他们也会同时单击div父级。这是因为my-child在div内部，很明显。

这是我推荐的：

在child-component.ts文件中，添加一个名为@Output的新description属性：

@Output() public leanMore: EventEmitter<string> = new EventEmitter();
@Output() public description: EventEmitter<string> = new EventEmitter();

然后在父组件模板文件中，删除(click)="description()"，并将其添加到my-child。

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

然后最后，在child-component.html中，将点击监听器添加到<div>Description </div>元素中。因此，模板文件应如下所示：

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

希望这对您有所帮助并解决了您的问题。

Answer 2

您可以在viewPromotionDetails（'了解更多信息'）中尝试e.stopPropagation（）。您的堆叠失败无法正常工作。

Answer 3

我会尝试将div.lear-more转换为button元素。 Div将其点击事件传播到其祖先（直到根元素）。

子组件Output事件触发父组件的父节点方法

3 个答案: