Angular загрузить больше при первом событии прокрутки

Question

Мне нужна помощь, чтобы мое приложение angular включило загрузку трех объектов, и как только пользователь прокрутит все остальные объекты, загрузится. Но я немного застрял и не знаю, как двигаться дальше. Может ли кто-нибудь помочь мне или помочь мне или, по крайней мере, указать мне правильное направление?

Вот мой код: (Извините за такой длинный пост)

import {
Component,
ComponentFactoryResolver,
OnDestroy,
OnInit,
ViewContainerRef,
Type,
ViewChild,
Input,
ViewEncapsulation
} from '@angular/core';
import {Location} from '@angular/common';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/takeUntil';
import { SectionsService } from './sections.service';
import { Router } from '@angular/router';
import {GlobalsService} from './globals.service';

@Component({
  selector: 'app-sections',
  templateUrl: './sections.component.html',
  styleUrls: ['./sections.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SectionsComponent implements OnDestroy, OnInit {

@ViewChild('sections', {read: ViewContainerRef}) sections;

private ngUnsubscribe: Subject<boolean> = new Subject();
private pathString;
private lang = '';
public notFound = false;

constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    private sectionsService: SectionsService,
    private location: Location,
    private router: Router,
    private globalsService: GlobalsService,
) {
    this.pathString = location.path();
    this.lang = this.globalsService.getLanguage() !== '' ? '/' + this.globalsService.getLanguage() : '';
}


getSections(pagePath): void {
    if (pagePath === '/undefined' || pagePath === '/false') {
        return;
    }

    this.sectionsService.getSections(pagePath)
        .takeUntil(this.ngUnsubscribe)
        .subscribe(
        res => {
          const loadFirst = res.slice(0, 3);
          const loadAfter = res.slice(2).event.srcElement.scrollTop;
          this.loadSections(res, pagePath);
        },
        error => {
            this.notFound = true;
        });
}

loadSections(sections, pagePath) {
    for (const section in sections) {
        if (sections.hasOwnProperty(section)) {
            this.loadSection(sections[section].charAt(0).toUpperCase() + sections[section]
                .substr(1).toLowerCase() + 'Component',
                section,
                pagePath,
                section);
        }
    }

    this.globalsService.setDoneLoading(true);
}

loadSection(section, sectionUniqueId, pagePath, index) {
    const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
    const factoryClass = <Type<any>>factories.find((x: any) => x.componentName === section);

    const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
    const ref = this.sections.createComponent(factory);
    ref.instance.sectionUniqueId = sectionUniqueId;
    ref.instance.sectionPagePath = pagePath;
    ref.instance.sectionIndex = index;
    ref.changeDetectorRef.detectChanges();
}

ngOnInit() {
    this.getSections(this.pathString);
}

ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
}

}

Answer 1

Вы можете использовать виртуальную прокрутку angular cdk, которая позволит вам отображать данные при прокрутке. https://material.angular.io/cdk/scrolling