如何将FocusIn和FocusOut作为一个整体应用于primeng树

Question

场景：我在 div 组件中有一棵 primeng 树。因此，当我单击任何树节点时，应该触发一次 focusin（即使我单击另一个节点，也不应触发 focusin，因为它已经在 div 内部单击）并且仅当我单击树外部时节点的 div 应该触发 focusout。

发生了什么：每当我单击该节点时，都会触发 focusin，如果我单击同一树中的另一个节点，则首先触发 focusout，然后触发 focusin。

代码如下：

.html

<div (focusin)="onFocusIn()" (focusout)="onFocusOut()">
  <p-tree [value]="files1"></p-tree>
</div>

.ts

  onFocusIn() {
    console.log('Focus In');
  }

  onFocusOut() {
    console.log('Focus Out');
  }

这是stackblitz link

Answer 1

您可以合并两个事件并获得最后一个焦点操作，这将是您需要的操作：

const focusOut = fromEvent(this.divRef.nativeElement, 'focusout');
const focusIn = fromEvent(this.divRef.nativeElement, 'focusin');

merge(focusOut, focusIn)
  .pipe(debounceTime(0))
  .subscribe((e: any) => {
    if (e?.type === 'focusin') {
       this.onFocusIn();
    } else {
       this.onFocusOut();
    }
  });

还有一个工作代码示例，希望对您有所帮助。 Stackblitz

如何将FocusIn和FocusOut作为一个整体应用于primeng树

How to apply FocusIn and FocusOut as a whole for the primeng tree

javascript

angular