角 2+ &ngBootstrap - 共享模式 [英] Angular 2+ & ngBootstrap - Shared Modals

问题描述

是否可以将 ngBootstrap 模态作为共享组件并在其他组件中使用它的实例.

我想要一个提示用户删除记录的 Modal，并且我想在具有不同记录类型的多个组件中重复使用它.

ngBootstrap 站点显示了一个组件即内容"示例，但在该示例中，ModalComponent 似乎决定了是打开还是关闭 ModalContents.我希望能够从另一个(任意)组件打开/关闭模式的实例.

这可能吗?

解决方案

1. 如下创建一个CommonModule，

   从 '@angular/core' 导入 { NgModule}；从'./modal.component'导入{CommonModalComponent}；从 'ng2-bootstrap/ng2-bootstrap' 导入 { ModalDirective,ModalModule }；@NgModule({进口:[模态模块]，声明:[ CommonModalComponent ]，出口:[CommonModalComponent]})导出类 CommonModule {}

2. 如您所见，CommonModalComponent 是CommonModule，如下创建该组件，

   从 '@angular/core' 导入 {Component,Input, ViewChild};从ng2-bootstrap/ng2-bootstrap"导入{ ModalDirective }；@零件({选择器:'common-modal',模板:`<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="模态内容"><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></按钮></div><div class="modal-body"><ng-content select=".modal-body"></ng-内容></div><div class="模态页脚"><div class="拉左"><button class="btn btn-default" (click)="hide()">取消</按钮></div></div></div></div></div>`,})导出类 CommonModalComponent {@ViewChild('childModal') public childModal:ModalDirective;@Input() 标题?:字符串；构造函数(){}展示(){this.childModal.show();}隐藏(){this.childModal.hide();}}

3. 在 AppModule 中使用 CommonModule 及其组件如下，

   从 '@angular/core' 导入 {Component, ViewChild, ViewContainerRef, NgModule};从@angular/platform-b​​rowser"导入 {BrowserModule}；从'./common.module'导入{CommonModule}；导入 {CommonModalComponent} './modal.component';@零件({选择器:'我的应用'，模板:`
   <h2>你好{{name}}</h2><button type="button" class="btn btn-primary" (click)="childModal.show()">打开模态</button><common-modal #childModal [title]="'common modal'"></通用模式></div>`,})导出类 App {@ViewChild('childComponent') childComponent:CommonModalComponent;名称:字符串；构造函数(私有 viewContainerRef:ViewContainerRef){this.name = 'Angular 2 Common Module with ModalComponent'}}@NgModule({导入:[ BrowserModule,CommonModule ]，声明:[应用程序]，引导程序:[应用程序]})导出类 AppModule {}

现场演示

其他信息:

1. 这个通用模块可以在任何地方使用来重现您的需求在 Angular 2 中的 ContentProjection 的帮助下，可以在下线

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

2. 在您的 AppComponent 中，您可以使用它并将项目添加到您的CommonModal 为，

   <div class="modal-body">一些表单控件或显示内容</div>

   这可以在这个 现场演示中看到

3. 既然，你想要警告消息或确认的模式，你可以重用 common-modal 并创建另一个 WarningModalComponent并在应用程序中使用它

Is it possible to have a ngBootstrap modal as a shared component and use an instance of it in other components.

I'd like to have one Modal that prompts the user to delete a record and I'd like to re-use it across multiple components with different record types.

ngBootstrap site shows a "Components As Content" example but in that example it looks like the ModalComponent dictates whether to open or close the ModalContents. I'd like the ability to open/close an instance of a modal from another (arbitrary) component.

Is this possible?

解决方案

1. Create a CommonModule as below,

   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. As you can see, CommonModalComponent is a declaration in CommonModule, Create that component as below,

   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. Using the CommonModule and its components in the AppModule as below,

   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

Additional Information:

1. This common module can be used any where to reproduce your needs with the help of ContentProjection in Angular 2 which can be seen in below line

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

2. In your AppComponent, you can use this and add items to your CommonModal as,

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

   This can be seen in this LIVE DEMO

3. Since, you want modal for warning messages or confirmation you can reuse the common-modal and create another WarningModalComponent and use that across application

这篇关于角 2+ &ngBootstrap - 共享模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！