web-dev-qa-db-ja.com

angular 6動的コンテンツを含むモーダルポップアップ

私のプロジェクトには、約50人のユーザーのユーザーリストがあります。各ユーザー名をクリックすると、対応するユーザーの情報がモーダルポップアップに表示されます。

コード内のポップアップ内でIDによってコンテンツをロードする方法がわかりません。

2つのコンポーネントがあります。ユーザーリストとユーザーの詳細。

<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 1</a></li>
<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 2</a></li>...

 <!-- POPUP PERSONAL DETAILS START HERE -->
<div class="modal fade" id="personal-details" role="dialog">
    <div class="modal-dialog">        
      <!-- Modal content-->
      <div class="modal-content">           
        <div class="modal-body">             
            <app-userdetails></app-userdetails> 
        </div>
      </div>
    </div>
  </div>
<!-- POPUP PERSONAL DETAILS END HERE -->

セレクター<app-userdetails></app-userdetails>別のコンポーネント（ユーザー詳細コンポーネント）から取得。

これが私のHTMLデザイン構造です。これにより、モーダルポップアップが同じコンテンツで表示されます。次に、DBからのリアルタイムデータを使用してこのセクションをカスタマイズします。その場合、ユーザーIDを別のコンポーネントに渡す方法。

これを修正するのを手伝ってください

typescriptangular6
5
Sam Hanson

モデルの[ng-bootstrap] [1]ライブラリを確認することを強くお勧めします。これの直接的な利点は、アプリからjQueryへの依存関係を削除することです。これはAngular（私の経験では）内で使用するのが面倒な場合があります！

Ng-bootstrapライブラリを使用して、必要な数の入力パラメーターを渡します。

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';

これをすべてまとめると、次のことをお勧めします。

  1. データベースと通信するサービスを作成します。これには、すべてのユーザー名、IDなどを取得するメソッドが含まれます（画面を表示するための高レベルの情報）。
  2. 最初の画面で上記のサービスを呼び出して、必要な高レベルの情報を取得し、ユーザーに表示します。 （可能であれば、オブザーバブルと非同期パイプを試して作業してください。トッド・モトはこれについて素晴らしい[チュートリアル] [2]を持っています）
  3. ユーザーがIDをクリックすると、サービスを再度使用しますが、今回はユーザーのIDを渡し、ユーザーオブジェクトを取得します。ユーザーオブジェクトは、モデルに渡して、必要に応じてレンダリングできます:)

これがあなたの質問に答えることを願っています。そうでない場合はお知らせください。アダム

[1] :!） https://ng-bootstrap.github.io/#/components/modal/examples

[2] :!） https://toddmotto.com/angular-ngif-async-pipe

4
adamturner
 The working Modal with content .I hope this is very helpful

 Angular 6 Modal Directive Component. The custom modal directive is used for 
 adding  modals anywhere in your angular application.

https://stackblitz.com/edit/angular-iybx4hangular6-custom-popup

0
Vijay Chauhan