为什么Angular2(click)事件没有在<div>上触发？

Question

我发现Angular2有一个奇怪的行为:

(点击)没有触发:

<div (click)="test()">test</div>

但它在这里工作:

<div style="position: relative;" (click)="test()">test</div>

谁能解释这种行为？为什么需要设置位置样式以便(点击)触发？

我错过了什么吗？

Answer 1

你的代码片段看起来很棒!

问题出在你的CSS样式中.你<div>可能要么继承了一个不同的position值,要么只是 - 继承了另一个元素阻塞你的元素<div>(不允许它被点击).

通过将位置更改为relative有效,很可能是因为此位置启用z-index并将您<div>的顶部移动到阻挡它的另一个元素.

这应该足以让你弄明白了.但如果你想要更详细的答案 - 请分享你的CSS.

谢谢。这是css的问题。我正在使用Angular-cli，在一个新项目中一切正常。当我添加bootstrap4时，我可能会看到此行为，这可能是由于bootstrap的默认CSS。 (2认同)

Answer 2

面临同样的问题，问题是我命名了一个 HTML 元素并且方法相同。

事情是这样的：

mycomponent.html

<div #doSomething>
</div>

<div (click)="doSomething();">
</div>

mycomponent.ts

doSomething() {
    // ...
}