角2+＆ngBootstrap - 共享情态动词

Question

是否有可能具有ngBootstrap模态作为共享组件和其他组件使用它的一个实例。

我想有一个模态提示用户删除的记录，我想跨多个组件与不同的记录类型重新使用它。

ngBootstrap现场展示了“组件内容”的例子，但在这个例子，它看起来像ModalComponent决定是否打开或关闭ModalContents。我希望能够从另一个（任意）组件打开/关闭模态的实例。

这可能吗？

Answer 1

1. 创建如下一个CommonModule，

   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. 正如你所看到的，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为看到下面一行

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

2. 在你AppComponent，你可以用这个和你 CommonModal添加项目为，

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

   这可以在这个LIVE DEMO

3. 可见

   因为，你要为模态警告信息或确认可以 重用共模态并创建另一个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"); 
} 

您可以使用它来创建一个共享服务，将参考保持到了模态和从任何组件进行操作。