Question

[请检查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>

ts

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

Answer 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'});

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

1 个答案: