Escenario: tengo un árbol primeng dentro de un componente div. Entonces, cuando hago clic en cualquiera de los nodos del árbol, el enfoque debe activarse una vez (incluso si hago clic en otro nodo, no debería activarse el enfoque porque ya se hizo clic dentro del div) y solo cuando hago clic fuera del nodo del árbol, el div debería activarse el enfoque
Qué sucede: cada vez que hago clic en el nodo, se activa el enfoque y, si hago clic en otro nodo dentro del mismo árbol, primero se activa el enfoque y luego se activa el enfoque.
Aquí está el código:
.html
<div (focusin)="onFocusIn()" (focusout)="onFocusOut()"> <p-tree [value]="files1"></p-tree> </div>.ts
onFocusIn() { console.log('Focus In'); } onFocusOut() { console.log('Focus Out'); }Aquí está el enlace de stackblitz
Puede fusionar dos eventos y obtener la última operación de enfoque, esta será una acción que necesita:
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(); } });También un ejemplo con código de trabajo, espero que esto ayude. apilar