使用 ngx-bootstrap 为模态自定义 css

编程问答 2022-05-18

问题描述

文档 (https://valor-software.com/ngx-bootstrap/#/modals#service-custom-css-class) 说要使用

<button type="button" class="btn btn-primary" (click)="openModalWithClass(template)">Open modal with custom css class</button>
<br>
 
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Just a modal with a bunch of words inside,nothing serIoUs.
  </div>
</ng-template>

并在函数中显示“模板”

openModalWithClass(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(
      template,Object.assign({},{ class: 'gray modal-lg' })
    );

但是我为模态创建了一个组件（太大以至于不能在同一个组件中）所以 html 中没有 #template，我如何从我的其他 html 组件中导入 #template id？

非常感谢！

解决方法

如果你试图从另一个组件打开一个模态组件，那么这是使用 ngx-bootstrap 的正确方法： https://valor-software.com/ngx-bootstrap/#/modals#service-component

angularangularngx-bootstrap