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

Posted 2023-02-23

【中文标题】角度 - DOM .contains() 找不到元素并且 parentNode 为空

【英文标题】：angular - DOM .contains() cannot find element and parentNode is null

【发布时间】：2019-07-25 12:47:03

【问题描述】：

我想这里很多人都熟悉.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 上报告这个问题。

【讨论】：

我相信这就是@ViewContents 和@ContentChildren 之间的区别。 ViewChildren 不包含存在于 ng-content 标记中的元素。 ContentChildren 只是存在于 ng-content 标签内的元素。