角2+＆ngBootstrap - 共有モーダル

Question

ngBootstrapモーダルを共有コンポーネントとして使用し、他のコンポーネントでそのインスタンスを使用することは可能ですか？

ユーザーにレコードの削除を促す1つのModalを用意したいと思います。異なるレコードタイプの複数のコンポーネントにわたって再利用したいと思います。

ngBootstrapサイトは、「Components As Content」の例を示しますが、この例では、ModalComponentがModalContentsを開くか閉じるかを指定するように見えます。私は別の（任意の）コンポーネントからモーダルのインスタンスを開いたり閉じることができるようにしたいと思います。

これは可能ですか？

Answer 1

1. あなたが見ることができるように、以下のように

   import { NgModule} from '@angular/core'; 
   import { CommonModalComponent } from './modal.component'; 
   import { ModalDirective,ModalModule } from 'ng2-bootstrap/ng2-bootstrap'; 
   @NgModule({ 
       imports:[ModalModule], 
       declarations: [ CommonModalComponent ], 
       exports:[CommonModalComponent] 
   }) 
   export class CommonModule {} 
   

2. をCommonModuleを作成し、CommonModalComponentは CommonModuleで宣言され、以下のように、そのコンポーネントを作成し、

   import {Component,Input, ViewChild} from '@angular/core'; 
   import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap'; 
   
   @Component({ 
       selector: 'common-modal', 
       template: ` 
       <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
       <div class="modal-dialog modal-sm"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <h4 class="modal-title pull-left">{{title}}</h4> 
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        </div> 
        <div class="modal-body"> 
        <ng-content select=".modal-body"> </ng-content> 
        </div> 
   
        <div class="modal-footer"> 
        <div class="pull-left"> 
         <button class="btn btn-default" (click)="hide()"> Cancel </button> 
        </div> 
        </div> 
       </div> 
       </div> 
   </div> 
       `, 
   }) 
   export class CommonModalComponent { 
       @ViewChild('childModal') public childModal:ModalDirective; 
       @Input() title?:string; 
       constructor() { 
       } 
       show(){ 
       this.childModal.show(); 
       } 
       hide(){ 
       this.childModal.hide(); 
       } 
   } 
   

3. CommonModuleとその使用AppModuleのコンポーネント以下のように、

   import {Component, ViewChild, ViewContainerRef, NgModule} from '@angular/core'; 
   import {BrowserModule} from '@angular/platform-browser'; 
   import {CommonModule} from './common.module'; 
   import {CommonModalComponent} './modal.component'; 
   @Component({ 
       selector: 'my-app', 
       template: ` 
       <div> 
        <h2>Hello {{name}}</h2> 
        <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button> 
       <common-modal #childModal [title]="'common modal'"> 
       </common-modal> 
       </div> 
       `, 
   }) 
   export class App { 
       @ViewChild('childComponent') childComponent:CommonModalComponent; 
       name:string; 
       constructor(private viewContainerRef: ViewContainerRef) { 
       this.name = 'Angular 2 Common Module with ModalComponent' 
       } 
   } 
   
   @NgModule({ 
       imports: [ BrowserModule,CommonModule ], 
       declarations: [ App ], 
       bootstrap: [ App ] 
   }) 
   export class AppModule {} 
   

LIVE DEMO

追加情報：

1. この共通モジュールは、あなたのニーズを再現 とするために、任意の場所を使用することができますContentProjectionのAngular 2の助けを借りてnはあなたのAppComponentでライン以下

   <ng-content select=".modal-body"> </ng-content> 
   

2. で見ることが

   <div class="modal-body"> 
        Some Form Controls or Displaying content 
   </div> 
   

   は、これは、このLIVE DEMO

3. で見ることができる、として、あなたはこれを使用して、あなたの CommonModalに項目を追加することができます

   警告メッセージや確認のためのモーダルが必要な場合 共通モダリティを再利用して別のメッセージを作成するWarningModalComponenトン とは、アプリケーション全体

Answer 2

さて、あなたはモーダルをインスタンス化し、そのドキュメントごとに、あなたはNgbModalRefインスタンスを取得することを使用します。このインスタンスには、componentInstanceというプロパティがあります。これは、明らかに、モーダルコンテンツに使用するコンポーネントのインスタンスです。

これを実行するには、コンポーネントインスタンスにコンストラクタにActiveModalインスタンスを挿入し、後で使用できるメソッドにアクセスできるようにする必要があります。

open() { 
    const modalRef = this.modalService.open(NgbdModalContent); 

    // you should have access to the activeModal methods like dismiss 
    modalRef.componentInstance.activeModal.dismiss("some reason"); 
} 

これを使用して、モーダルへの参照を保持し、任意のコンポーネントから操作する共有サービスを作成できます。