Question

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

我已经看过很多教程，外部库等，而且它的使用非常有限。基本上所有这些都遵循创建模态服务的方法，管理模态和带有转换的模态组件，以根据内容更改模板。这要求我们需要将模态放在当前组件的模板中。像这样：

@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状态，因此目前我们不确定它是否是一个有效的选项。任何以这种方式工作的图书馆或任何如何完成的方向？

Answer 1

我强烈建议不要使用ngx-bootstrap，并使用@ng-bootstrap。 ngx-bootstrap缺乏功能，@ ng-bootstrap具有更多功能和稳定性。

我从ngx-bootstrap开始，最后更改了它。我还看到Angular团队在ng-conf中推荐@ ng-bootstrap包。

实际上，我对ngx-bootstrap的一些组成部分做出了贡献。

模态 - Angular4

1 个答案: