Angular 4：stopPropagation（）有效，但也会停止任何进一步的DOM更新

Question

我有<table>个用户。可以单击每个<tr>以打开包含用户详细信息的信息面板。再次单击它会关闭面板。

<tr (click)="data.info = invert(data.info);">

<tr>还有用于修改或删除用户的图标。这些是单独的<td> s。

<td (click)="delete(data?._id, rowIndex); $event.stopPropagation();">

问题是当我点击修改或删除图标时，<tr>＆＃39; (click)事件也会触发。是的，这可以通过向我调用的函数添加$event.stopPropagation()来轻松解决。但有趣的是，它不仅会阻止父元素的触发点击事件，还会阻止DOM中的任何其他操作。

单击删除图标时调用的函数只是更改一个变量，该变量应导致div显示确认框（ngIf）。变量确实发生了变化，但只有在我第二次点击图标后，div才会出现。有趣的是，如果我第二次点击屏幕上的任何地方，它也会起作用。

即使<tr>没有(click)操作，也会发生同样的情况。

如果我将stopPropagation()移动到我调用的delete函数，这没有用，而且我把它放在函数中的位置并不重要。

问题是，如果我在点击<td>时使用正确的方法来停止传播？

Answer 1

好的，我找到了。这是其他人可能遇到的问题，我没有找到任何解决方案。

问题的根源是我试图通过更改delete()函数中的变量来显示的组件是@ViewChild。任何其他组件或纯DOM元素都不会出现此问题。

解决方案只是将ChangeDetectorRef添加到父组件的constructor并将其放在delete()函数的末尾：

this._changeDetectorRef.detectChanges();
event.stopPropagation();

Answer 2

您可以尝试简单地添加：

(contextmenu)=" false" 

或者如果你想调用一个函数：

(contextmenu)="click(); false" 

Answer 3

当您单击td并调用delete（）方法时。您应该在delete方法中停止传播。

例如：

delete():void{event.stopPropagation(); //rest lines of codes}

尝试此操作并从模板中删除传播。它应该解决这个问题。