相关疑难解决方法(0)

编程时可重用性非常重要,我们可以采取的任何措施来减少代码重复,这将有助于我们解决问题.

我必须使用Modal弹出窗口向Angular 2项目中的许多地方的用户显示信息.我正在使用ng-bootstrap,并且所有这些Modals都具有相同的页眉和页脚,但在许多情况下更改了正文.有时候身体只是想要替换一个占位符,有时候它有一些复杂性来准备动态内容.这些由不同的组件触发或管理.

ng-bootstrap允许我们以两种方式将内容传递给Modal.

1. 作为模板.这里包含整个Modal html<ng-template></ng-template>
2. 作为一个组件

使用第一种方法,我必须每个模态重复写标题,正文和页脚.

使用第二种方法,我可以将HTML包装在组件中,但需要放置占位符以使其动态化.所以我可以按如下方式传递值

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  } 

但灵活性仍然有限.

我想要实现的是使用内容投影[Transclusion]重新构建模态组件

所以,在我的Common Modal的主体中看起来如下.我把它<ng-content></ng-content>作为Modal身体的一个插槽.

  @Component({
  selector: 'common-modal',
  template: `
  <!-- Modal -->
  <div class="modal fade" id="common-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ng-content></ng-content>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div> …