実装
アイデアは、ページ処理ロジックを簡単に再利用する方法を提供することで、Angular アプリケーションではロジックをディレクティブにカプセル化するか、カスタム UI ウィジェットで Template Ref を受け入れる部品を作成することを意味します。 もしTemplate Refsに馴染みがないのであれば、私の過去の投稿をご覧になることを強くお勧めします▶️こちら。カスタマイズできるUI要素の数は少なくない（最大5項目）ので、Paginatorが特定の状態にあるときに異なる動作をさせたい場合があるので、私はディレクティブを作ることにしました。 例えば、最初の1️⃣や最後の🏁ページが選択されたときに、「最初のページに移動」「前のページに移動」「最後のページに移動」「次のページに移動」ボタン🔘で何かしたい場合があります。 要素を無効にするか、非表示にするか、所定のCSSクラスを適用することができます。 もし、ページャーがコンポーネント🔥😱として実装された場合、設定を担当する入力プロパティの数を考えてみてください。
全体の実装を紹介する前に、ディレクティブのコードの一部を見てみましょう。 さらに、テンプレート内のインスタンスにアクセスできるようにエクスポートされます。
基礎となる入力要素の値を設定する setValue メソッドと、選択したページが変更されたときにアクションを実行する setPage メソッドを持っています。
さらに、特定のページャの状態を示す 2 つのパブリック ゲッターを持ちます。
input イベントが発生すると、無効な文字🚫を削除する処理が行われます。
最後に、入力プロパティの変更は、無効な値を考慮して処理されます。
ディレクティブの全体のコードは次のとおりです。