将自定义样式应用于 ngb 模态答案

【问题标题】：apply custom styles to ngb modal将自定义样式应用于 ngb 模态
【发布时间】：2020-09-29 18:41:41
【问题描述】：

[请检查 img 以供参考][1] 当我调用函数打开模态对话框时，我在 Angular 7 项目中使用 3 个 ngb 模态，它会自动创建干扰我的自定义设计的 div 标签，并且 windowClass 在这里也不起作用，如果我在检查中删除这些标签，那么一切都很完美.我在这里想念什么？


<ng-template  #content1 let-modal>
    <div  class="modal-dialog modal-auto-width" role="document">
        <div class="modal-content model-content-auto-width">
            <div class="modal-body no-spacing">
                <div class = "row">
                    <div class="col-lg-6 col-md-10 col-xl-5 mx-auto white-bg p-0">
                        <div class="row">
                            <div class="col-lg-12 p-0 mx-auto">
                                <div class="empty-title-bar"></div>
                                <div class="close-batch-btn">
                                    <button *ngIf = "batchCheck" (click)="closeBatch()" type="button" class="btn btn-outline-secondary" data-dismiss="modal">
                                    CLOSE BATCH
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 mx-auto">
                                <ng-container *ngIf="showRegister">
                                    <div class="row   align-items-center  batch-register-row" *ngFor="let register of showRegister[0].Registers">
                                        <div class="col-lg-4 col-md-4 col-4">
                                            <div class=" modal-batch-name" >
                                                <span> {{register.registerName}} </span>
                                            </div>
                                            <div class="modal-person-name" >
                                                <span> John</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-8 col-8">
                                            <div class="modal-batch-register-buttons d-flex">
                                                <button *ngIf="register.status == 'o' && register.id != _register " (click)="selectDefaultRegister(register.id); modal.close()" type="button" class="btn " data-dismiss="modal">
                                                <img src="assets/images/open-ico.svg">
                                                Select
                                                </button>
                                                <button *ngIf="register.status == 'o'" (click)="closeRegister(register.id)" type="button" class="btn " data-dismiss="modal">
                                                <img src="assets/images/close-ico.svg">  
                                                Close
                                                </button>
                                                <button (click)="alert('this feature will be available soon')" type="button" class="btn " data-dismiss="modal">
                                                <img src="assets/images/details-ico.svg">  
                                                Details
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </ng-container>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>

open(content: any) {
    this.modalService.open(content, { backdrop: 'static', windowClass: "model-content-auto-width   modal-auto-width"}).result.then((result) => {
    });
  }

【问题讨论】：

imgur.com/a/VzM8OvR
你没有错过任何东西。 ng-bootstrap 模态确实为您包装了模态中的所有内容。这就是它的作用。您需要做的就是提供页眉、正文和页脚，如文档中所示。具体问题是什么？你想达到什么目的？
关于 windowClass 不起作用，您尝试过什么，它是如何不起作用的？你能提供一个完整的最小例子吗？
基本上，当我调用该函数时，它会创建两个具有自己的类的 div，这些 div 会干扰模式的设计，如果我删除这些 div 一切正常，请检查 img
这不是一个完整的最小示例，我可以在其中重现您的问题。发布一个 stackblitz 复制它。您可以从那里开始，例如：stackblitz.com/run?file=app%2Fmodal-options.ts

标签： angular bootstrap-modal angular-ui-bootstrap

【解决方案1】：

可以从 Angular 应用程序全局样式表中设置模态元素的样式。

由于 Angular 样式封装，不能通过将 'windowClass' 放置在模态组件的样式上或打开模态的组件上来设置模态的样式。

例如，如果我想对模态应用更多圆角。

将样式添加到全局样式表 (src/styles.scss)。
modal-content 类是 ngb modal 应用的样式。

.modal-rounded {
  .modal-content {
    border-radius: 20px !important;
  }
}

将全局样式类传递给模态

this.modalService.open(content, {centered: true, windowClass: 'modal-rounded'});

【讨论】：