でモーダル ダイアログを使用することはかなり一般的です。別のページに移動せずにテーブル内のレコードを編集する場合、データを検索する場合、または単にユーザーに警告メッセージを表示する場合でも、モーダル ダイアログを使用すると優れたユーザー エクスペリエンスが得られる可能性があります。残念ながら、サードパーティのライブラリがなければ、  でこれを行うのはそれほど簡単ではありません。それには、重要なコードを作成し、Angular フレームワークの内部メカニズムを理解する必要があります。これが、Angular でモーダル ダイアログを表示するためのライブラリを Developer Partners で開発した理由です。この記事ではライブラリを使用します。 Web アプリケーション Angular  1. ライブラリをインストールする ライブラリを NPM 経由でインストールし、それを使用できるように Angular モジュールに含める必要があります。これをインストールするための NPM コマンドは次のとおりです。 @developer-partners/ngx-modal-  dialog   npm install @developer-partners/ngx-modal-dialog 次に、モーダル ダイアログを使用する必要がある Angular モジュールにこれを含める必要があります。私たちのデモ アプリケーションは非常に小さく、AppModule というモジュールが 1 つだけあります。 AppModule Angular モジュールの imports 配列にライブラリから ModalModule を含める必要があります。  準備は完了です。アプリケーションでモーダル ダイアログ コンポーネントの使用を開始できます。  2. モーダルダイアログを表示する 前に述べたように、書籍リストに書籍を追加または編集する場合は、モーダル ダイアログを表示します。まず、書籍のリストを表示するコンポーネントを作成しましょう。新しい Angular コンポーネントを作成し、  という名前を付けます。 BookListComponent これは  Typescript クラスの内容です。  BookListComponent   クラスは、わかりやすくするために、テーブルに表示するデータとしてハードコードされた書籍のリストを使用します。また、モーダル ダイアログを表示できるようにするために、ngx-modal-dialog ライブラリの  Angular サービスも必要です。そのため、それをコンストラクターに挿入しました。 BookListComponent ModalService 次に、書籍のリストを HTML テーブルに表示する の HTML ファイルを作成します。  BookListComponent 上記の HTML コードは非常に単純です。本のリストを表で表示します。 「新しい本を追加」というボタンもあります。 これまでの UI は次のようになります。   [新しいブックの追加] ボタンをクリックすると、Typescript クラスの 関数が呼び出されます。  関数は、テーブルに新しい書籍を追加するためのモーダル ダイアログを表示します。これは、  関数の Typescript コードです。  createBook createBook createBook   関数は、  クラスの 関数を呼び出してモーダル ダイアログを表示します。  関数は 2 つのパラメータを取ります。モーダル ダイアログ内に表示する Angular コンポーネントのクラスと、タイトル、サイズ、位置、その他いくつかのダイアログの設定であるモーダル ダイアログのオプションです。モーダル ダイアログの本体に表示するには、Angular コンポーネントが必要です。このコンポーネントがなければ、モーダル ダイアログは画面に重なる空のパネルに過ぎません。そのコンポーネントは で、上のスクリーンショットの 関数の最初のパラメーターです。 createBook ModalService show show CreateEditBookComponent show    Angular コンポーネントは、本の追加と編集の両方を担当します。まず、新しい書籍を追加するコードに取り組みます。以下は、CreateEditBookComponent の HTML コードです。このコードには、作成する本の ID とタイトルを入力するためのフィールドがいくつかあり、ダイアログを閉じてデータを保存するためのボタンがあります。  CreateEditBookComponent モーダル ダイアログ UI は次のようになります。   CreateEditBookComponent コンポーネントの Typescript コードは次のとおりです。    コンポーネントは、  という Angular サービスを使用します。 図書館。このサービスは、モーダルを閉じる、イベントをサブスクライブするなど、コンポーネントが配置されているモーダル ダイアログと対話するために使用します。上のスクリーンショットでは、  関数でモーダル ダイアログを閉じているだけです。 HTMLの「キャンセル」ボタンがクリックされたときに 関数を呼び出します。 HTML コードの「保存」ボタンをクリックすると、  関数を呼び出すフォームが送信されます。  関数では、  関数と同様にモーダル ダイアログを閉じますが、リストに新しい本を追加するためのデータを含む プロパティも渡します。 CreateEditBookComponent ModalReference   ngx-モーダル-ダイアログ cancel キャンセル saveData saveData cancel book   サービスはジェネリック タイプです。  サービスの 関数を呼び出すときは、同じ型のオブジェクトをそのジェネリック パラメーターとして渡す必要があります。私たちの場合、それは という Typescript インターフェイスです。  関数に渡すパラメーターは クラスの 関数を呼び出すことによって、モーダル ダイアログを作成したコンポーネントに戻されます。  ModalReference ModalReference closeSuccess Book closeSuccess 、ModalService show  ModalReference サービスの closeSuccess 関数を呼び出すと、モーダル ダイアログが閉じられ、RxJS イベントがトリガーされ、新しく作成されたブックがそのイベントのサブスクライバーに渡されます。上のスクリーンショットでは、コールバック関数の パラメーターは、モーダル ダイアログから受け取った新しく作成されたブックであるため、UI に表示するにはそれを 配列に追加するだけです。 newBook ブックス  3. モーダルダイアログへのデータの受け渡し モーダル ダイアログにデータを渡す必要がある場合があります。たとえば、リストから書籍を編集したい場合、編集したい書籍レコードをモーダル ダイアログに渡し、変更したい初期データを取得できます。 まず、行データを編集するためのボタンをテーブルの行に追加します。  テーブルの各行に [編集] ボタンがある UI は次のようになります。    関数のコードは 関数とほぼ同じですが、重要な違いが 1 つだけあります。ダイアログ オプションの プロパティを使用して、編集する書籍をモーダル ダイアログに渡します。  editBook createBook モデル   プロパティを使用してモーダル ダイアログに渡すパラメーターは、  プロパティを介してダイアログ内で使用されるコンポーネントの サービスで使用できるようになります。  model config.model ModalReference 上のスクリーンショットでは、渡されたパラメーターをコピーし、それを コンポーネントの プロパティに割り当てています。  オブジェクトの プロパティは参照によって渡されるため、そのオブジェクトのプロパティに加えた変更は書籍のリストを表示するテーブルに反映されます。これをコピーする理由は、ユーザーが「保存」ボタンをクリックするまでテーブル内の行を変更しないためです。 「キャンセル」ボタンをクリックすると、テーブルデータは更新されません。 CreateEditBookComponent book ModalReference.config モデル  [ブックの編集] モーダル ダイアログは次のようになります。  結論 Angular のモーダル ダイアログを最初から構築するのは簡単ではありませんが、モーダル ダイアログ ライブラリを使用するとはるかに簡単になります。ライブラリを設定し、プロジェクトでモーダル ダイアログを表示するためにそれを使用する方法を説明しました。ダイアログの最も基本的な使用例と機能について説明しましたが、@developer-partners/ngx-modal-dialog ライブラリには、実際のプロジェクトで役立つ可能性のある他の機能がたくさんあります。 こちらでも公開しております。 詳細については、以下のリンクを参照してください。   @developer-partners/ngx-modal-dialog モーダル ダイアログに優れた読み込みスピナーを表示したい場合は、Angular での読み込みスピナーの構築に関する記事を参照してください。   Angular でローディング スピナーを作成する方法

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More

このオーディオは、ストーリーの元の言語で制作されています。

Angularでモーダルダイアログを表示する方法

About Author

コメント

ラベル

この記事は

Related Stories

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

ワークフローを10倍に向上させる方法: 必須アプリ17選

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

ワークフローを10倍に向上させる方法: 必須アプリ17選

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps