ng-bootstrap Modal border-radius

Question

自定义NgBoostrap模式的border-radius的最好方法是什么?

<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Test</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Hello, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
</div>
</ng-template>

Answer 1

您只需要将border-radius添加到modal-content类:

.modal-content{
border-radius: 50px;
}

Answer 2

我找到了组件的typescript，并添加了如下内容:

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

不久之后，我去了我的主scss (styles.scss)，并把这段代码放在那里:

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