ボタンクリックで異なる内容のモーダルを動的に開く

Question

私はangular2アプリケーションを開発しようとしています。私はページ上の各カードフッターに9つのボタンを持っています。任意のボタンまたはアンカータグをクリックすると、ブートストラップのモーダルが開きますが、クリックごとに内容が異なる必要があります。モーダルのテンプレートは、クリックされた各ボタンごとにコンテンツが異なることを除けば、同じでなければなりません。今は、同じテンプレートと内容のすべてのボタンでモーダルが開きます。 IDとボタンを関連付けることで、クリックが同じモーダルテンプレートでも異なるコンテンツになるようにします。

ここに私のコードはここsample.component.html

  <div class="row"> 
    <div class="col-md-4"> 
      <div class="card"> 
       <div class="card-content"> 
        <div class="card-header-orange"> 
         <h1 class="card-heading">Card Header Blue</h1> 
        </div> 
        <div class="card-body"> 
         <p class="card-p"> 
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, 
          or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there 
          isn't anything embarrassing hidden in the middle of text. 

         </p> 
        </div><br> 
        <div class="card-footer"> 
        <button (click)="openModal(template)" class="btn btn-primary">Learn More</button> 
       </div> 

       </div> 
      </div> 
     </div> 

    <div class="col-md-4"> 
      <div class="card"> 
       <div class="card-content"> 
        <div class="card-header-orange"> 
         <h1 class="card-heading">Card Header Blue</h1> 
        </div> 
        <div class="card-body"> 
         <p class="card-p"> 
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, 
          or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there 
          isn't anything embarrassing hidden in the middle of text. 

         </p> 
        </div><br> 
        <div class="card-footer"> 
        <button (click)="openModal(template)" class="btn btn-primary">Learn More</button> 
       </div> 

       </div> 
      </div> 
     </div> 


     <div class="col-md-4"> 
      <div class="card"> 
       <div class="card-content"> 
        <div class="card-header-orange"> 
         <h1 class="card-heading">Card Header Blue</h1> 
        </div> 
        <div class="card-body"> 
         <p class="card-p"> 
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.  
         </p> 
        </div><br> 
        <div class="card-footer"> 
        <button (click)="openModal(template)" class="btn btn-primary">Learn More</button> 
        </div> 

       </div> 
      </div> 
     </div> 
</div> 

にあります私のモーダルテンプレートです：

 <ng-template #template> 
    <div class="modal-header"> 
    <h4 class="modal-title pull-left">Modal</h4> 
     <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
<div class="modal-body"> 
This is a modal. 
</div> 

Answer 1

あなたはNG-コンテンツ機能を試すことができます。あなたはそれを参照として使用することができます： - https://blog.angular-university.io/angular-ng-content/

あなたはNG-コンテンツを動的モーダル体の内容を変更するために使用した場合は、その後、あなたのモーダルは次のようになります： -

modal.component.htmlを： -

<div class="modal"> 
<div class="modal-dialog"> 
    <div class="modal-header"> 
     <span class="close-modal" (click)="closeModal()">x</span> 
     <ng-content select="[modal-header]"></ng-content> 
    </div> 

    <div class="modal-content-container"> 
     <br> 
     <br> 
     <ng-content select="[modal-body]"></ng-content> 
    </div> 
</div> 

<div class="overlay" (click)="closeModal()"></div> 

とモーダル・コンポーネントへの呼び出しは次のようにする必要があります： -

abc.component.html： -

<modal > 
<div modal-header> 
    <h3>Instance</h3> 
</div> 
<div modal-body> 
    "Your Template" 
</div> 

これはあなたにもコードにプロの方法のよりダイナミックコンポーネントローダ、である別の方法を使用することができ、他の一つの方法かです。 - https://angular.io/guide/dynamic-component-loader

コンポーネントローダーを使用すると、任意のコンポーネントテンプレートをオプションに従ってモーダルに動的に読み込むことができます。

あなたはコンポーネントローダを使用することを選択した場合、あなたのモーダルは希望： - このコンポーネントローダで

<div class="modal"> 

<div class="modal-dialog" *ngIf="(selectors$ | async).state"> 

    <div class="modal-header"> 
     <span class="close-modal" (click)="closeModal()">x</span> 
    </div> 

    <div class="modal-content-container"> 
     <ng-container component-loader [config]="selectors.component" [payload]="selectors.data"></ng-container> 
    </div> 
</div> 

<div class="modal-overlay" (click)="closeModal()" *ngIf="(selectors$ | async).state"></div> 

を動的に受け取った入力に応じて異なるコンポーネントをロードするディレクティブです。 modal.component.tsファイルは次のようになります。 -

@Component（{ セレクター： 'modal'、 templateUrl： './modal.component。html '、 }

エクスポートクラスModalComponent { @ Input selectors：Observable; コンストラクタ（） }

セレクタは、このようなオブジェクトになります： - セレクタ= { 成分：「動的にロードされるコンポーネントの名前」、 データ：「任意のデータを動的に渡されます" }