Элемент содержит не работает (Angular 2+, RxJS)

Question

Вот мой код. https://stackblitz.com/edit/angular-tq2vaa

constructor(private host: ElementRef) {
}

get element() {
    return this.host.nativeElement;
}

private editModeHandler() {
     const clickOutside$ = fromEvent(document, 'click').pipe(
        filter(({ target }) => {
        console.log('parent', this.element, 'child', target)

          const ans = this.element.contains(target) === false
          console.log(ans)
          return  ans
        }),
        take(1)
     )
}

Это то, что он печатает в консоли. Как видите, app-editable-component содержит h3, который является целью, но почему ans верен ???

Answer 1

Я пытался проверить ваш код, см. здесь

import { Component, ElementRef } from '@angular/core';
import  {fromEvent } from 'rxjs';
import { filter, take } from 'rxjs/operators';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

constructor(private host: ElementRef) {
  this.editModeHandler();
}

get element() {
    return this.host.nativeElement;
}

private editModeHandler() {
      fromEvent(document, 'click')
      .pipe(
        filter(({ target }) => {
        console.log('parent', this.element, 'child', target)

          const ans = this.element.contains(target) === false
          console.log(ans)
          return  ans
        }),
        take(1)
     ).subscribe();
}  

}

, когда я нажимаю на тег <h3> ans показывает false!я делаю то же самое, что и вы?я что-то упустил?

ОБНОВЛЕНИЕ .

После твоего стекаблица я вижу, что происходит.Я постараюсь быть простым:

1. Вы нажимаете на h3 элемент
2. edit режим активирован (поэтому h3 заменяется на input)
3. Событие click отлавливается document, потому что щелчок пузырится, а contains(h3) вернет false (из-за # 2)
4. switchMapTo(clickOutside$) выполнено
5. view режим активирован (действительно скорость, поэтому вы не увидите, как ввод появляется и исчезает).

Чтобы исправить это, вы можете остановить распространение, когда оно перехватывается хост-элементом.

private viewModeHandler() {
        fromEvent(this.element, 'click').pipe(
            untilDestroyed(this)
        ).subscribe((e) => {
            console.log('clicked inside');
            this.editMode.next(true);
            this.mode = 'edit';
            e.stopPropagation();
        });
    }

Надеюсь, это поможет.