自定义 NgbModal 服务在打开时设置默认配置找不到入口组件 [英] Custom NgbModal service to set default config on open does not find an entry component
问题描述
我希望我们应用程序中的所有模态都有一组默认选项，而不必在每次打开模态时单独应用它们.因此，我创建了一个扩展 NgbModal 的服务，以便我可以覆盖 open 方法，因为在 NgBootstrap v1.1.2 中没有全局配置，但未找到虽然列在功能模块中的入口组件.>
我想知道 /core 中提供的服务是否没有看到加载到功能模块中的入口组件?直接使用 NgbModal 模式会如您所愿打开，但更改提供的类似乎不会替换服务或将 DI 从 NgbModal 交换到 ModalService 会产生此错误:
ERROR 错误:找不到组件工厂ConfirmReleaseDocumentsModalComponent.你把它添加到@NgModule.entryComponents?谁能看出为什么这可能不起作用，或者有没有更好的方法在 NgBootstrap v1.1.2 中的模态上进行全局配置?
服务
import { Injectable } from '@angular/core';从@ng-bootstrap/ng-bootstrap"导入 { NgbModal, NgbModalOptions, NgbModalRef };@Injectable()导出类 ModalService 扩展了 NgbModal {公开开放(内容:任何，选项?:NgbModalOptions):NgbModalRef {const defaultOptions: NgbModalOptions = {背景:'静态'，键盘:假};options = { ...defaultOptions, ...options }返回 super.open(content, options);}}应用模块
@NgModule({进口:[浏览器模块，核心模块，共享模块],声明: [应用组件],引导程序:[AppComponent]})导出类 AppModule { }核心模块
@NgModule({进口:[通用模块],供应商: [模态服务]})导出类 CoreModule {构造函数(@Optional() @SkipSelf() parentModule: CoreModule) {throwIfAlreadyLoaded(parentModule, 'CoreModule');}}功能模块
@NgModule({进口:[通用模块，共享模块，文件路由模块],声明: [//...ConfirmReleaseDocumentsModalComponent//...],入口组件:[ConfirmReleaseDocumentsModalComponent]})导出类 DocumentsModule { }我最初尝试更换提供程序，但由于某种原因这不起作用:
提供者:[{ 提供: NgbModal, useClass: ModalService },]于是我尝试直接使用该服务:
组件打开模式
构造函数(//私有 modalService: NgbModal,//原来有效private modalService: ModalService,//替换为 ModalService) { }公共 releaseBatchFromQueue(): void {fromPromise(this.modalService.open(ConfirmReleaseDocumentsModalComponent).结果).管道(switchMap((result: boolean) => {返回(结果)?this.documentService.releaseFromQueue(this.selectedIds): Observable.empty();})).订阅(...);}更新
还尝试直接在服务中调用 NgbModal 而不是扩展，但它产生相同的入口组件错误:
import { Injectable } from '@angular/core';从@ng-bootstrap/ng-bootstrap"导入 { NgbModal, NgbModalOptions, NgbModalRef };@Injectable()导出类 ModalService {构造函数(私有模式服务:NgbModal) { }公开开放(内容:任何，选项?:NgbModalOptions):NgbModalRef {const defaultOptions: NgbModalOptions = {背景:'静态'，键盘:假};options = { ...defaultOptions, ...options }返回 this.modalService.open(content, options);}}它与模块的延迟加载有关.如果入口组件位于延迟加载的模块中，则不会加载它们，并且必须向上移动到共享.有一个与模块中的入口组件不可用相关的已发布的 GitHub 问题，但它已经开放了一年多没有来自贡献者的太多活动，因此它可能是一个问题并且在积压中存在一段时间 - https://github.com/angular/angular/issues/14324.
I want all the modals in our application to have a set of default options, and not have to apply them individually each time a modal is opened. So I created a service that extends NgbModal so I could overwrite the open method since in NgBootstrap v1.1.2 there is no global config, but the entry component though listed in the feature module is not found.
I'm wondering if the service being provided in/core doesn't see entry components loaded in a feature module? Using NgbModal directly the modal opens as you would expect, but changing the provided class doesn't seem to replace the service or swapping the DI from NgbModal to the ModalService produces this error:
ERROR Error: No component factory found for
ConfirmReleaseDocumentsModalComponent. Did you add it to
@NgModule.entryComponents?
Can anyone see why this might not work, or is there a better way to have a global config on a modal in NgBootstrap v1.1.2?
Service
import { Injectable } from '@angular/core';
import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@Injectable()
export class ModalService extends NgbModal {
public open(content: any, options?: NgbModalOptions): NgbModalRef {
const defaultOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false
};
options = { ...defaultOptions, ...options }
return super.open(content, options);
}
}
App Module
@NgModule({
imports: [
BrowserModule,
CoreModule,
SharedModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
Core Module
@NgModule({
imports: [
CommonModule
],
providers: [
ModalService
]
})
export class CoreModule {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
}
Feature Module
@NgModule({
imports: [
CommonModule,
SharedModule,
DocumentsRoutingModule
],
declarations: [
// ...
ConfirmReleaseDocumentsModalComponent
// ...
],
entryComponents: [
ConfirmReleaseDocumentsModalComponent
]
})
export class DocumentsModule { }
I initially tried to replace the provider, but this didn't work for some reason:
providers: [
{ provide: NgbModal, useClass: ModalService },
]
So then I tried using the service directly:
Component Opening Modal
constructor(
// private modalService: NgbModal, // original that works
private modalService: ModalService, // replaced with ModalService
) { }
public releaseBatchFromQueue(): void {
fromPromise(this.modalService
.open(ConfirmReleaseDocumentsModalComponent)
.result)
.pipe(
switchMap((result: boolean) => {
return (result)
? this.documentService
.releaseFromQueue(this.selectedIds)
: Observable.empty();
})
)
.subscribe(...);
}
Update
Also tried just invoking NgbModal directly in the service and not extending, but it produces the same entry component error:
import { Injectable } from '@angular/core';
import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@Injectable()
export class ModalService {
constructor(
private modalService: NgbModal
) { }
public open(content: any, options?: NgbModalOptions): NgbModalRef {
const defaultOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false
};
options = { ...defaultOptions, ...options }
return this.modalService.open(content, options);
}
}
It's related to lazy loading of modules. Entry components are NOT loaded if they are in a lazy loaded module, and must be moved up to shared. There is a posted GitHub issue related to entry components in modules not being available, but it's been open for over a year without much activity from contributors so it might be an issue and in the backlog for awhile - https://github.com/angular/angular/issues/14324.
这篇关于自定义 NgbModal 服务在打开时设置默认配置找不到入口组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
