带有 ngx-bootstrap 的模态自定义 css答案

【问题标题】：Custom css for modal with ngx-bootstrap带有 ngx-bootstrap 的模态自定义 css
【发布时间】：2021-06-13 21:58:44
【问题描述】：

文档 (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？

非常感谢！

【问题讨论】：

标签： angular ngx-bootstrap

【解决方案1】：

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

【讨论】：

链接打不开，你说的是Service Examples的第二个例子？
是的，第二个选项
这就是我所做的，但是如何在模态组件中添加#template？我收到一个错误，因为按钮在一个 html 组件中，而模式在另一个
#template 是不需要的，我们有一个专门的组件用于模型 ModalContentComponent
刚刚通过添加 openModal 函数 this.bsModalRef.setClass('my-class') 并在应用程序的 main style.scss 中导入样式来使其工作:)