Angular Application을 이용한 Ngx Infinite Scroller 구현

이 블로그에서는 Angular 애플리케이션의 무한 스크롤을 소개합니다. 애플리케이션을 준비할 때 동시에 수많은 파일을 처리합니다. 이 상황에서 하나의 페이지에 수천 개의 등록을 표시하는 방법에 대한 질문을 받게 됩니다.

한 페이지에 수천 개의 레코드를 한 번에 로드하는 것은 좋지 않으며 무한 스크롤을 구현하면 많은 이점이 있습니다.

더 빠른 작업을 할 수 있도록 웹 사이트의 시간을 늘리십시오

.

페이지의 깊이를 쉽게 늘릴 수 있도록 함

필요한 최소 클릭 수

더 나은 사용자 인터페이스

최고의 모바일 레이아웃

주요 이점 중 하나는 웹 사이트의 이탈률을 줄이는 것입니다

.

Angular에서 무한 스크롤을 구현하기 위해 ngx-infinite-scroll이라는 npm 패키지를 사용할 수 있습니다.

무한 스크롤을 시작하려면 아래에 설명된 몇 가지 단계를 따라 새 프로젝트를 생성하기만 하면 됩니다.

다음 명령에 따라 새 각도 프로젝트를 만듭니다.

ng new ngxInfiniteScrollerDemo

다음 명령을 사용하여 프로젝트에 두 개의 구성 요소를 만들었습니다.

ng generate component hello
ng generate component scrollContainer

위는 필수 구성 요소로 프로젝트를 생성하는 데 필요한 기본 단계이며, 앱에서 무한 스크롤을 사용하려면 ngx-infinite-scroll이라는 또 다른 npm 패키지를 설치해야 합니다. 아래 언급된 npm:

npm install ngx-infinite-scroll

위의 종속성 외에도 Angular 자료를 사용하여 페이지를 디자인했으므로 Angular/cdk를 설치했습니다.

npm install @angular/cdk

무한 스크롤을 구현하기 위해 먼저 사용자 인터페이스를 디자인하므로 app.component.html 및 app.component.css 코드 스니펫은 다음과 같습니다.

App.component.html

<app-scroll-container>
  <mat-table>
    <ng-container>
      <mat-header-cell>
        {{ column | titlecase }}
      </mat-header-cell>
      <mat-cell>{{ item[column] }}</mat-cell>
    </ng-container>
    <mat-header-row></mat-header-row>
    <mat-row></mat-row>
  </mat-table>
</app-scroll-container>

App.component.css

:host {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}
app-scroll-container {
  flex-grow: 0;
  flex-shrink: 0;
}
app-scroll-container.full {
  flex-basis: auto;
}
app-scroll-container.part {
  flex-basis: 200px;
}
.buttons {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}

자세히 보기: Error Handling Using Angular Rxjs

serial_no, 이름, 무게 및 높이와 같은 데이터를 저장한 ELEMENT_DATA라는 이름의 여러 배열을 만들었습니다. 그런 다음 매트 테이블을 사용하여 다음 코드와 같이 getData() 메서드를 통해 데이터를 표시했습니다.

App.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Sort, MatSort, MatTableDataSource } from '@angular/material';
import { noop as _noop } from 'lodash-es';
interface Element {
  name: string;
  serial_no: number;
  weight: number;
  height: number;
}
const ELEMENT_DATA: Element[] = [
  {serial_no: 1, name: 'Bunty', weight: 50, height: 5.1},
  {serial_no: 2, name: 'Gaurav', weight: 52, height: 5.2},
  {serial_no: 3, name: 'Jayraj', weight: 69, height: 5.5},
  {serial_no: 4, name: 'Lokesh', weight: 90, height: 6},
  {serial_no: 5, name: 'Hardik', weight: 41, height: 5},
  {serial_no: 6, name: 'Sunil', weight: 27, height: 6},
  {serial_no: 7, name: 'Aniket', weight: 45, height: 4.5},
  {serial_no: 8, name: 'Jignesh', weight: 94, height: 6},
  {serial_no: 9, name: 'Abdul', weight: 84, height: 5},
  {serial_no: 10, name: 'James', weight: 29, height: 4},
  {serial_no: 11, name: 'Jigar', weight: 56, height: 5.1},
  {serial_no: 12, name: 'Jaimin', weight: 35, height: 5},
  {serial_no: 13, name: 'Nitin', weight: 68, height: 5.5},
  {serial_no: 14, name: 'Suhani', weight: 85, height: 3.5},
  {serial_no: 16, name: 'Lalit', weight: 36, height: 4},
  {serial_no: 17, name: 'Hiren', weight: 53, height: 4.5},
  {serial_no: 18, name: 'Himanshu', weight: 48, height: 4},
  {serial_no: 19, name: 'Piyush', weight: 93, height: 5},
  {serial_no: 20, name: 'Keval', weight: 78, height: 5.2},
];
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  dataSource: MatTableDataSource<element>;
  limit: number = 1000;
  displayedColumns: string[] = ['serial_no', 'name', 'weight', 'height'];
  full: boolean = true;
  @ViewChild(MatSort) sort: MatSort;

  constructor() { }
  ngOnInit() {
    this.getData();
  }
  handleScroll = (scrolled: boolean) => {
    console.timeEnd('lastScrolled');
    scrolled ? this.getData() : _noop();
    console.time('lastScrolled');
  }
  hasMore = () => !this.dataSource || this.dataSource.data.length < this.limit;
  getData() {
    const data: Element[] = this.dataSource
      ? [...this.dataSource.data, ...ELEMENT_DATA]
      : ELEMENT_DATA;
    this.dataSource = new MatTableDataSource(data);
    this.dataSource.sort = this.sort;
  }
}
</element>

스크롤 구성 요소에서 무한 스크롤을 구현하는 메서드를 만들었습니다. 여기에서 다음과 같이 스크롤과 함께 작동하도록 항목에 일부 속성을 제공했습니다.

InfiniteScroll은 스크롤되는 내용을 정의하는 기본 속성입니다.

InfiniteScrollDistance는 항목의 정의된 백분율에 도달할 거리를 제공하는 데 사용되며, 이때 스크롤링 이벤트가 트리거됩니다.

infinteScrollThrottle은 스크롤 이벤트가 트리거된 후 밀리초 수를 나타냅니다.

스크롤은 스크롤에 도달했을 때 특정 작업을 수행하는 방법입니다.

scrollWindow에서 창 스크롤 또는 스크롤 이벤트를 수신할지 여부를 결정해야 합니다.

따라서 이들은 이 데모 프로젝트에서 사용한 속성 중 일부이지만 요구 사항에 따라 더 많은 메서드 또는 속성을 사용할 수 있습니다.

따라서 무한 스크롤을 구현하는 코드는 다음과 같이 스크롤 컨테이너에 있습니다.

Scroll-container.component.ts

import { Component, OnInit, OnChanges, Input, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
import { throttle as _throttle, noop as _noop } from "lodash-es";
enum ScrollDirection {
  UP = 'up',
  DOWN = 'down'
}
enum ScrollListener {
  HOST = 'scroll',
  WINDOW = 'window:scroll'
}
@Component({
  selector: 'app-scroll-container',
  templateUrl: './scroll-container.component.html',
  styleUrls: ['./scroll-container.component.css']
})
export class ScrollContainerComponent implements OnInit, OnChanges {
  private _element: Element;
  private _window: Element;
  public scrollTop = 0;
  @Input() more = true;
  @Input() scrollDelay = 500;
  @Input() scrollOffset = 1000;
  @Output() scrolled: EventEmitter<boolean> = new EventEmitter<boolean>();
  @HostListener(ScrollListener.HOST) _scroll: Function;
  @HostListener(ScrollListener.WINDOW) _windowScroll: Function;
  constructor(private elRef: ElementRef) {
    this._element = this.elRef.nativeElement;
    this._window = document.documentElement as Element;
  }
  ngOnInit() {
    this.setThrottle();
  }
  ngOnChanges(changes) {
    if (changes.scrollDelay) this.setThrottle();
  }
  setThrottle() {
    this._scroll = this._windowScroll = _throttle(this.handleScroll, this.scrollDelay);
  }
  getListener = () => this.elRef.nativeElement.clientHeight === this.elRef.nativeElement.scrollHeight
    ? ScrollListener.WINDOW
: ScrollListener.HOST
  roundTo = (from: number, to: number = this.scrollOffset) => Math.floor(from / to) * to;
  getScrollDirection = (st: number) => this.scrollTop <= st ? ScrollDirection.DOWN : ScrollDirection.UP;
  canScroll(e: Element): boolean {
    const scrolled = this.more
      && this.getScrollDirection(e.scrollTop) === ScrollDirection.DOWN
      && this.roundTo(e.clientHeight) === this.roundTo(e.scrollHeight - e.scrollTop);
    this.scrollTop = e.scrollTop;
    return scrolled;
  }
  handleScroll = () => this.getListener() === ScrollListener.HOST
    ? this.scrolled.emit( this.canScroll(this._element) )
    : this.scrolled.emit( this.canScroll(this._window) )
}
</boolean></boolean>

Scroll-container.component.html

<ng-content></ng-content>

신뢰할 수 있는 제품Angular Development Company을 찾고 계십니까? 지금 문의하세요.

app.module.ts 파일은 다음과 같습니다.

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule, MatSortModule, MatProgressSpinnerModule } from '@angular/material';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ScrollContainerComponent } from './scroll-container/scroll-container.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, BrowserAnimationsModule, MatTableModule, MatSortModule, MatProgressSpinnerModule ],
  declarations: [ AppComponent, HelloComponent, ScrollContainerComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

산출

프로젝트를 실행하면 다음 화면에서 출력을 볼 수 있습니다.

결론

이 블로그에서 우리는 ngx 무한 스크롤에 대해 논의했고, 그 속성과 그것을 구현하는 방법에 대해 논의했습니다. 우리는 또한 더 나은 이해를 위해 데모 프로젝트를 구현했습니다.