angular - 元素包含不起作用(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

我试图测试您的代码，请参阅 here

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 !我和你做同样的事吗？我错过了什么吗？

更新 。

在你的 stackblitz 之后，我看到了发生了什么。我会尽量简单:

1. 您点击 h3元素
2. edit模式已激活(因此 h3 被 input 取代)
3. 点击事件被 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();
        });
    }

希望这对您有所帮助。