Angular 2 ng-bootstrap：同一模式需要 2 个不同的按钮 window

Question

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

我的问题是这个：我想从 2 个不同的按钮（位于不同的 html 模板中）打开相同的模式 window。我找到的唯一解决方案是复制包含按钮的 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 标记移动到主要组件。在您的 child 组件中，声明一个 input property.

@Input() content: ElementRef;

所以，现在您可以将您的标记作为选项传递给 children：

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

并且，您在 child 组件中作为：

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

查看更新后的 plunk。

使用服务的解决方案

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

服务代码：

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方法来显示对话框：

child仁:

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

查看更新后的 plunk。

Angular 2 ng-bootstrap：同一模式需要 2 个不同的按钮 window

Angular2 ng-bootstrap: need 2 differents buttons for the same modal window

ng-bootstrap

angular