Angular7-materials-cdk-virtual-scrolling
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の詳細は次のとおりです-
画像の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が呼び出されて表示されます。