css - 如何使用 modalService useage 将自定义 css 添加到 ngx-bootstrap 模态(参见下面的原因)？

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

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

我怎样才能克服我遇到的这个问题？

Answer 1

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