Angular7-マテリアル/CDK-仮想スクロール

これは、Angular 7に追加された仮想スクロールと呼ばれる新機能の1つです。この機能は、CDK（コンポーネント開発キット）に追加されます。仮想スクロールは、ユーザーに表示されるdom要素をユーザーに表示します。ユーザーがスクロールすると、次のリストが表示されます。これにより、完全なリストが一度にロードされるのではなく、画面上の表示に従ってのみロードされるため、より高速なエクスペリエンスが得られます。

なぜ仮想スクロールモジュールが必要なのですか？

すべてのデータを一緒にロードするとパフォーマンスの問題が発生する可能性のある大きなリストを持つUIがあると考えてください。 Angular 7 Virtual Scrollingの新機能は、ユーザーに表示される要素の読み込みを処理します。ユーザーがスクロールすると、ユーザーに表示されるdom要素の次のリストが表示されます。これにより、操作が速くなり、スクロールも非常にスムーズになります。

私たちのプロジェクトに依存関係を追加しましょう-

npm install @angular/cdk –save

仮想スクロールモジュール

仮想スクロールモジュールの依存関係をインストールしました。

プロジェクトで仮想スクロールモジュールを使用する方法を理解するために、例に取り組みます。

次のように、最初に app.module.ts 内に仮想スクロールモジュールを追加します-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

app.module.tsで、ScrollDispatchModuleをインポートしました。上記のコードに示すように、同じものがimports配列に追加されます。

次のステップは、画面に表示されるデータを取得することです。前の章で作成したサービスを引き続き使用します。

約5000個の画像のデータがあるURL、https://jsonplaceholder.typicode.com/photosからデータを取得します。それからデータを取得し、仮想スクロールモジュールを使用してユーザーに表示します。

URL、https://jsonplaceholder.typicode.com/photosの詳細は次のとおりです-

Jsonplaceholder

画像のURLとサムネイルのURLを持つjsonデータです。ユーザーにサムネイルのURLを表示します。

以下は、データを取得するサービスです-

*myservice.service.ts*

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

次のようにapp.component.tsからサービスを呼び出します-

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

これで、変数 albumdetails にはAPIからのすべてのデータが含まれ、合計カウントは5000です。

データを表示する準備ができたので、app.componentl内でデータを表示します。

仮想スクロールモジュールを使用するには、タグ<cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport> *を追加する必要があります。タグは、データを表示するlファイルに追加する必要があります。

これがapp.componentlの <cdk-virtual-scroll-viewport> の動作です。

<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

画面にユーザーにidとサムネイルのURLを表示しています。これまではほとんど* ngForを使用していましたが、 <cdk-virtual-scroll-viewport> 内では、* cdkVirtualForを使用してデータをループする必要があります。

app.componentl内に入力されるalbumdetails変数をループしています。仮想タグ[itemSize] = "20"に割り当てられたサイズがあり、仮想スクロールモジュールの高さに基づいてアイテムの数が表示されます。

仮想スクロールモジュールに関連するCSSは次のとおりです-

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

仮想スクロールの高さは500pxです。その高さに収まる画像がユーザーに表示されます。仮想スクロールモジュールを表示するために必要なコードを追加しました。

ブラウザでの仮想スクロールモジュールの出力は次のとおりです-

仮想スクロール

最初の4つの画像がユーザーに表示されていることがわかります。 500pxの高さを指定しました。ユーザーがスクロールすると、テーブルにスクロールが表示され、その高さに収まる画像が以下に示すように表示されます-

ユーザースクロール

ユーザーがスクロールすると、必要な画像がロードされます。この機能は、パフォーマンスの点で非常に便利です。最初は、5000個の画像すべてをロードするのではなく、ユーザーがスクロールすると、URLが呼び出されて表示されます。

Angular7-materials-cdk-virtual-scrolling

Angular7-マテリアル/CDK-仮想スクロール

なぜ仮想スクロールモジュールが必要なのですか？