NgbModal 通用服务

Question

我希望能够在模式或页面上显示表单。我在页面上的表单非常简单，因为页面和表单都存在于同一个模块中。但是，对于模态中的表单，情况有点不同。

我想创建一个通用服务，我可以调用它并传入一个组件，使该组件显示在模态中。所以我的服务有这样的方法：

showForm(component: any, options?:NgbModalOptions){
    const modal = this.ngbModal.open(content, {
      backdrop: 'static',
      size: 'lg',
     ...options
   });
   ...
}

这个模态服务将在我的 SharedModule 中，它是在应用程序模块级别导入的。然后我有一个延迟加载的安全模块。在安全模块中，我有一个 PracticeFormComponent，它是我想在模式中显示的表单。我在 SecureModule 的声明、导出和入口组件中有 PracticeFormComponent。

当我尝试从同样在 SecureModule 中声明的页面调用 modalService.showForm(PracticeFormComponent) 时，我收到一条错误消息，指出找不到组件工厂。我不确定我在这里错过了什么。

如果有人能帮我解决这个问题，还有第二个问题，是否可以调用 FormComponent 从另一个模块加载，即使它是 SecureModule 的延迟加载子或同级？

Answer 1

I then have a secure module that is lazy loaded. In the secure module I have a PracticeFormComponent that is the form that I want to show in my modal.

PracticeFormComponent 组件工厂在惰性模块加载之前不存在。

When I try to call modalService.showForm(PracticeFormComponent) from a page that is also declared in SecureModule

您正在使用组件 class（构造函数）而不是组件工厂。 WebPack 将允许您直接从 TypeScript 文件 import 此函数。所以不会有任何编译时错误，但是在运行-time 模式服务将尝试从这个引用中发现组件工厂，并且它将使用用于创建该服务器的依赖注入器.

您需要更改 showForm() 函数，使其需要组件工厂而不是 any，并使用它来创建模态。

这将帮助您解决与模块相关的依赖性问题，因为除非它存在于 DI 中，否则您将无法获取工厂。

您可以从惰性模块内部创建模式，但不能从外部创建。如果您需要在惰性模块之外执行此操作，那么该模态组件并不是真正的惰性。这是一个共享组件。

NgbModal 通用服务

NgbModal generic service

ng-bootstrap

angular