Angular Search & Pagination

BY admin
|

Pagination Component

ページ処理コンポーネントで私たちが行うべきことは、ユーザーが選択できるすべてのページ番号を表示することと、選択したページからデータを取得するためにページが変更されたら検出することの 2 点です。

まず最初に、ページ送りを作成するために必要な情報 (ページ サイズとアイテムの合計量) を受け取るための Input プロパティをコンポーネントに追加するつもりです。 それは、pagesAmount を丸めるため (何らかの理由でまだ丸くなっていない場合) と、pagesAmount で数値の配列を埋めるためです。

Ok, それでなぜ数値の配列が必要なのでしょうか。 ユーザーに対して可能なすべてのページをレンダリングするためです。 Angular では、直接数値を取り、特定の回数だけ *ngFor ループを要求することができないので、これを克服するために私が通常使用する 1 つの戦略です。 私たちが欲しいのは通常の順序付き番号リストなので、以下のマークアップに示すように、実現は簡単です。

<span
*ngFor="let page of pagesArray; let index = index"
="{ 'active': currentPage === index + 1 } 
(click)="setPage(index + 1)"
>
{{ index + 1 }}
</span>

このマークアップでは、ユーザーが選択できるすべてのページをレンダリングしています。 ユーザーが現在どのページにいるのかを知らせるために、現在選択されているページにいくつかのスタイルを設定する ngClass を追加しています。 また、選択したページが変更されたことを親コンポーネントに知らせるイベントを発行するクリック アクションを挿入しました。 ただし、現在最初のページにいるときは左の矢印を、現在最後のページにいるときは右の矢印を非表示にします。 itemsAmount が数百で、pageSize が小さい場合はどうでしょうか。 あるいは、アイテム数が 1000 の場合はどうでしょうか。 すべてのページを一度にレンダリングすることになり、これらの数字がただそこにぶら下がっているだけで、かなり悪いユーザビリティを持つことになります。

そこで、マークアップに戻り、ページ番号を表示する部分に次の変更を追加するつもりです。 これは、ページのサイズとアイテムの合計量の入力を受け取り、ユーザーが表示したいページを選択できるようにし、必要なページ処理ロジック/要求を処理するために、選択したページを示すイベントをトリガーします。