NgbModal 通用服务

Question

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

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

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

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

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

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

Answer 1

然后我有一个延迟加载的安全模块。在安全模块中，我有一个 PracticeFormComponent，它是我想在我的模式中显示的表单。

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

当我尝试从同样在 SecureModule 中声明的页面调用 modalService.showForm(PracticeFormComponent) 时

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

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

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

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