angular - DOM .contains () не может найти элемент, а parentNode имеет значение null - PullRequest
Новая
       20

angular - DOM .contains () не может найти элемент, а parentNode имеет значение null

0 голосов
/ 04 марта 2019

Я думаю, что многие здесь знакомы с функцией .contains(), которая используется для проверки того, является ли элемент / узел дочерним по отношению к родительскому узлу.

Ниже приведена простая угловая директива 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);
        }
    }

Это прекрасно работает до тех пор, пока я не нажму на любой элемент изображения, .contains() на самом деле не найдет его и вместо этого вернет false.Пример: 

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

Есть идеи, почему элементы изображения не найдены?

1 Ответ

0 голосов
/ 05 марта 2019

Когда элемент HTML находится внутри блока ng-container, этот конкретный элемент DOM имеет свойство parentNode как null.Я подозреваю, что блок ng-container не будет сгенерирован в DOM, поэтому ссылка на его родительский узел не работает.

Это препятствует работе функции DOM .contains() (поскольку она основана на обходе через узелTree)

Я сообщу об этой проблеме на Angular GitHub.

...