如何使用modalService useage将自定义css添加到ngx-bootstrap modal（请参阅下面的原因）？

Question

我有一个非常小众的用例。我必须添加这样的模态动画： regular css animation 但是我需要在所述模态中有一个组件（我们自己的数据表过滤器组件）。 所以我需要使用 ModalService。但是这个服务只是像这样附加我的自定义配置：

  toggleFilter = () => {
    const modalOptions: ModalOptions = {
      initialState: {
        labels: this.datatableLabels, // needed for filter to have labels
        filterGroups: this.filterGroups // needed to add filterGroups
      },
      class: 'filter-modal' // this sould be my custom class
    };
    this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
  }

到modal-content，上面提到的动画和样式使用了上面的div。不仅当封装设置为ViewEncapsulation.None 时它可以工作，而且它也会破坏我们的其他模态，因为我无法将正确的类应用于我需要处理的类。

我该如何克服我遇到的这个问题？

Answer 1

而不是使用 ModalService 并在模态中打开所需的嵌入式组件。您基本上可以在使用指令的同时将所需的组件注入到模态的主体中->在这里您要声明整个模态布局->您可以修改所有相关的类，以便更容易修改模态并使您的 ViewEncapsulation 未调整以便其他模态不受影响。