Question

我用 angular2 + ng-bootstrap + bootstrap Beta 4 开始我的第一个项目，这对我来说有点困难。

我的问题是这个问题：我想从2个不同的按钮（位于不同的html模板中）打开相同的模态窗口。我找到的唯一解决方案是复制包含按钮的html模板。我确信有更好的解决方案。

    <ng-template #contact let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal1</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>I'd like my 2 differents buttons to open the same modal window</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(contact)">Contact button but with different text and style and same popup</button>

http://plnkr.co/edit/pmRdVLyDLkJkkIPLItAL?p=preview

非常感谢您的帮助和建议

Answer 1

您可以将contact标记移动到主要组件。在您的子组件中，声明input property。

@Input() content: ElementRef;

因此，现在您可以将标记作为选项传递给子项：

<ngbd-modal2 [content]="contact"></ngbd-modal2>

并且，您在子组件中：

open() {
  this.modalService.open(this.content);
}

请参阅更新后的plunk。

使用服务的解决方案

您可以创建一个服务，该服务将在定义模态内容的组件和将调用模式对话框的组件之间共享。该服务只需要公开一个observable和一个方法来提升observable。

服务代码：

subscription = new Subject();
showModal() {
    this.subscription.next();
}

因此，具有模态对话框内容的组件可以订阅subscription以显示模式对话框：

主要组成部分：

@ViewChild('contact') modalContent: ElementRef;
constructor(private modalService: ModalService, private ngbModal: NgbModal) {
    modalService.subscription.subscribe(() => {
      this.ngbModal.open(this.modalContent)
    })
}

因此，消费者只需要调用showModal方法来显示对话框的模态对话框：

小孩：

constructor(private modalService: ModalService) {}
open() {
  this.modalService.showModal();
}

请参阅更新后的plunk。

Angular2 ng-bootstrap：对于相同的模态窗口需要2个不同的按钮

1 个答案: