ゼロから実装した Angular paginator

実装

アイデアは、ページ処理ロジックを簡単に再利用する方法を提供することで、Angular アプリケーションではロジックをディレクティブにカプセル化するか、カスタム UI ウィジェットで Template Ref を受け入れる部品を作成することを意味します。 もしTemplate Refsに馴染みがないのであれば、私の過去の投稿をご覧になることを強くお勧めします▶️こちら。カスタマイズできるUI要素の数は少なくない(最大5項目)ので、Paginatorが特定の状態にあるときに異なる動作をさせたい場合があるので、私はディレクティブを作ることにしました。 例えば、最初の1️⃣や最後の🏁ページが選択されたときに、「最初のページに移動」「前のページに移動」「最後のページに移動」「次のページに移動」ボタン🔘で何かしたい場合があります。 要素を無効にするか、非表示にするか、所定のCSSクラスを適用することができます。 もし、ページャーがコンポーネント🔥😱として実装された場合、設定を担当する入力プロパティの数を考えてみてください。

全体の実装を紹介する前に、ディレクティブのコードの一部を見てみましょう。 さらに、テンプレート内のインスタンスにアクセスできるようにエクスポートされます。

基礎となる入力要素の値を設定する setValue メソッドと、選択したページが変更されたときにアクションを実行する setPage メソッドを持っています。

さらに、特定のページャの状態を示す 2 つのパブリック ゲッターを持ちます。

input イベントが発生すると、無効な文字🚫を削除する処理が行われます。

最後に、入力プロパティの変更は、無効な値を考慮して処理されます。

ディレクティブの全体のコードは次のとおりです。

コメントする