情态模式- Angular4

Question

我正在寻找在Angular 4中遵循组件架构实现模态的最佳方法。

我看过很多教程，外部库，等等，但它的使用相当有限。基本上，它们都遵循创建Modal Service的方法，以管理模态和使用transclude的模态组件，以根据内容更改模板。这就要求我们需要将模型放在当前组件的模板中。如下所示：

@Component({
selector: 'modal',
template: `
    <div [ngClass]="{'closed': !isOpen}">
        <div class="modal-overlay" (click)="close(true)"></div>

        <div class="modal">
            <div class="title" *ngIf="modalTitle">
                <span class="title-text">{{ modalTitle }}</span>
                <span class="right-align" (click)="close(true)"><i class="material-icons md-24">clear</i></span>
            </div>

            <div class="body">
                <ng-content></ng-content>
            </div>
        </div>
    </div>

然后是这样的用法：

<modal title='My title'>
  <div>
    My Modal
  </div>
</modal>`

对于小型应用程序，这是一种很好的方法。对于大型应用程序，这不是一个很好的解决方案。这个想法是让一个服务动态地打开组件，而不定义它们。组件中类似这样的内容：this.openModal(CustomModal)

ng-bootstrap的功能与此非常相似，但它使用的是Bootstrap 4，并且仍然是alpha版本，所以目前我们不确定它是否是一个有效的选项。任何以这种方式工作的库，或者任何如何实现的方向？