Question

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

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

ngBootstrap网站显示“作为内容的组件”示例，但在该示例中，看起来ModalComponent指示是打开还是关闭ModalContents。我希望能够从另一个（任意）组件打开/关闭一个模态实例。

这可能吗？

Answer 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 {}

如您所见， 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();
  }
}

使用AppModule中的CommonModule及其组件，如下所示

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

其他信息：

此常用模块可用于任何可以重现您需求的地方在Angular 2中的ContentProjection的帮助下可以看到在线以下
```
<ng-content select=".modal-body"> </ng-content>
```
在AppComponent中，您可以使用此功能并将项目添加到您的 CommonModal as，
```
<div class="modal-body"> 
        Some Form Controls or Displaying content
</div>
```
这可以在LIVE DEMO
因为您需要模态警告消息或确认重用common-modal并创建另一个 WarningModalComponent 并在整个应用程序中使用

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");
}

您可以使用它来创建一个共享服务，该服务将保留对模态的引用并从任何组件对其进行操作。

Angular 2+＆amp; ngBootstrap - 共享模态

2 个答案: