$event.stopPropagation() 在 Angular 2 中不起作用答案

【问题标题】：$event.stopPropagation() not working in Angular 2$event.stopPropagation() 在 Angular 2 中不起作用
【发布时间】：2017-08-31 05:51:45
【问题描述】：

这以前是有效的。我的 html 是否有问题导致它停止工作？下拉菜单不会打开。我也试过$('.ui.dropdown).dropdown(); 菜单会显示 0.1 秒然后消失。

<div class="list card ui">

    <div class="info">
        <div class="ui grid">
            <div class="three wide column">
                <div class="content">
                    <h4 class="ui image header"> {{product.name}} </h4>
                    <div class="sub header"> Product Number: {{product.productNumber}} </div>
                </div>
            </div>
            <div class="four wide column"> {{ product.client.name }} </div>
            <div class="one wide column"> {{ product.currentStatus.name }} </div>
            <div class="one wide column"> {{ sendInvoice }} </div>
            <div class="one wide column"> {{ approvalInvoice }} </div>
            <div class="two wide column"> {{ orderMail }} </div>
            <div class="two wide column"> {{ product.productPrice | number: '1.0-0' }} </div>
            <div class="two wide column"> {{ product.outSourcePrice | number: '1.0-0' }} </div>
        </div>
    </div>

    <div class="list-actions" (click)="$event.stopPropagation()">
        <div class="ui icon top right pointing dropdown">
            <i class="ellipsis horizontal icon"></i>
            <div class="menu">
                <div class="item" (click)="onView()"><i class="eye icon"></i> View </div>                    
                <div class="item" (click)="onEdit()"><i class="write icon"></i> Edit </div>
                <div class="item" (click)="onDelete()"><i class="trash icon"></i> Delete </div>
            </div>
        </div>
    </div>
    
</div>

【问题讨论】：

有什么问题？dropdown 不起作用或 stopPropogation 不起作用？
stopPropagation 附加到下拉列表中。所以我认为。 @VikhyathMaiya
你有像 ngIf 这样环绕下拉菜单的 if 条件吗？
没有。根本没有@VikhyathMaiya

标签： jquery dropdown semantic-ui semantic-ui-angular ng2-semantic-ui

【解决方案1】：

我在 ngOnInit() 方法中添加了$('.ui.dropdown').dropdown();

【讨论】：

【解决方案2】：

未经测试（不使用语义ui），我认为您在错误的地方使用了停止传播。您已将它放在包装下拉列表的 div 中，因此下拉列表没有收到事件。您应该像这样将停止传播移动到下拉列表本身：

<div class="list-actions">
        <div class="ui icon top right pointing dropdown" (click)="$event.stopPropagation()">
            <i class="ellipsis horizontal icon"></i>
            <div class="menu">
                <div class="item" (click)="onView()"><i class="eye icon"></i> View </div>                    
                <div class="item" (click)="onEdit()"><i class="write icon"></i> Edit </div>
                <div class="item" (click)="onDelete()"><i class="trash icon"></i> Delete </div>
            </div>
        </div>
    </div>

【讨论】：