问题描述
我想这里很多人都熟悉.contains()函数，它用于检查元素/节点是否是父节点的子节点。
下面是一个使用.contains()的简单 Angular click-outside 指令。
constructor(private _elRef: ElementRef) {
}
@Output()
public clickOutside = new EventEmitter();
@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
const clickedInside = this._elRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(null);
}
}
这很好用，直到当我点击任何 Image 元素时， .contains()实际上没有找到它并返回一个false 。
例子：
<div id="parent">
...
<button>
<ng-container>
<img id="child" src="...">
</ng-container>
</button>
...
</div>
知道为什么找不到图像元素吗？
1楼
当 HTML 元素位于ng-container块内时，该特定 DOM 元素的parentNode属性为null 。
我怀疑是因为ng-container块不会生成到 DOM，所以对其父节点的引用被破坏了。
这会阻止 DOM .contains()函数工作（因为它基于遍历节点树）
我会在 Angular GitHub 上报告这个问题。