es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

cargar más nodos p-tree en desplazamiento angular

21 Jul, 2023 Programación

Tenemos registros grandes que deben mostrarse en y por eso estoy tratando de implementar la adición de más datos al desplazarme en el scroll de . Sin embargo, no logro llegar al depurador en mi directiva. ¿Alguien puede ayudarme a activar el evento de desplazamiento al llegar al final? ¿Hay alguna otra forma de capturar el evento de desplazamiento en para mejorar el rendimiento de mi página?

explore.component.html

<div style="overflow: auto !important;height: 488px !important;" scrolltracker="" (scrollingfinished)="onScrollingFinished()">
<p-tree [value]="files | filter:searchText" selectionmode="single" [(selection)]="selectedFiles" (onnodeselect)="nodeSelect($event)" (onnodeexpand)="expandNode($event)"></p-tree>
</div>

explore.component.ts:

@Output() scrollingFinished = new EventEmitter<void>();

onScrollingFinished() {
this.scrollingFinished.emit();
}

directiva:

“`
import { Directive, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
@Output() scrollingFinished = new EventEmitter<void>();

emitted = false;

@HostListener("window:scroll", [])
onScroll(): void {
debugger;
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !this.emitted) {
this.emitted = true;
this.scrollingFinished.emit();
} else if ((window.innerHeight + window.scrollY) < document.body.offsetHeight) {
this.emitted = false;
}
}
}
“`

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que la directiva no está funcionando como se espera porque está escuchando el evento “window:scroll” en lugar del evento de desplazamiento en el elemento . Para capturar el evento de desplazamiento en , puedes agregar la directiva a este en lugar del contenedor

    . Además, puedes utilizar el decorador ViewChild de Angular para acceder al elemento en el componente y vincularlo a su evento de desplazamiento. Aquí tienes una implementación actualizada:

    explore.component.html:

    explore.component.ts:

    import { Component, ViewChild, ElementRef } from ‘@angular/core’;

    @Component({
    selector: ‘app-explore’,
    templateUrl: ‘./explore.component.html’,
    styleUrls: [‘./explore.component.css’]
    })
    export class ExploreComponent {

    @ViewChild(‘tree’) tree: ElementRef;

    onScrollingFinished() {
    // agregar nuevos datos al árbol
    }

    ngAfterViewInit() {
    this.tree.nativeElement.addEventListener(‘scroll’, () => {
    const treeEl = this.tree.nativeElement;
    if ((treeEl.scrollTop + treeEl.offsetHeight) >= treeEl.scrollHeight) {
    this.onScrollingFinished();
    }
    });
    }
    }

    En esta implementación, la directiva se aplica al elemento , y ViewChild se utiliza para obtener una referencia al elemento en la clase del componente. En ngAfterViewInit, se vincula el evento de desplazamiento al elemento , y cuando llega al final, se llama a onScrollingFinished para cargar más datos.

    ¡Espero que esto te ayude! Hazme saber si tienes alguna pregunta adicional.

Comments are closed.