时间戳

首页 > 解决方案 > 角度 - DOM .contains() 找不到元素并且 parentNode 为空

javascript - 角度 - DOM .contains() 找不到元素并且 parentNode 为空

问题描述

我想这里很多人都熟悉这个 .contains()函数，它用于检查元素/节点是否是父节点的子节点。

下面是一个简单的 Angular click-outside 指令，它使用.contains().

    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()实际上并没有找到它并返回 a false。例子：

<div id="parent">
    ...
    <button>
        <ng-container>
            <img id="child" src="...">
        </ng-container>
    </button>
    ...
</div>

知道为什么找不到图像元素吗？

标签： javascripthtmlangularelementcontains

解决方案

当 HTML 元素位于ng-container块内时，该特定 DOM 元素的parentNode属性为null. 我怀疑是因为ng-container块不会生成到 DOM，所以对其父节点的引用被破坏了。

这会阻止 DOM.contains()函数工作（因为它是基于遍历节点树的）

我将在 Angular GitHub 上报告这个问题。

推荐阅读