Angular 用于在打开时设置默认配置的自定义NgbModal服务找不到条目组件

我希望应用程序中的所有模态都有一组默认选项，而不必在每次打开模态时单独应用它们。因此，我创建了一个扩展NgbModal的服务，以便覆盖

open

方法，因为在NgBootstrap v1.1.2中没有全局配置，但是找不到功能模块中列出的条目组件

我想知道

/core

中提供的服务是否没有在功能模块中加载入口组件？直接使用NgbModal，模态将按预期打开，但更改提供的类似乎不会替换服务，或者将DI从

NgbModal

交换到

ModalService

会产生以下错误：

ERROR Error: No component factory found for 
ConfirmReleaseDocumentsModalComponent. Did you add it to 
@NgModule.entryComponents?

有人能理解为什么这可能不起作用，或者有没有更好的方法在NgBootstrap v1.1.2的模式上进行全局配置

服务

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

@NgModule({
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    ModalService
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }
}

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    DocumentsRoutingModule
  ],
  declarations: [
    // ...
    ConfirmReleaseDocumentsModalComponent
    // ...
  ],
  entryComponents: [
    ConfirmReleaseDocumentsModalComponent
  ]
})
export class DocumentsModule { }

应用程序模块

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

@NgModule({
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    ModalService
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }
}

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    DocumentsRoutingModule
  ],
  declarations: [
    // ...
    ConfirmReleaseDocumentsModalComponent
    // ...
  ],
  entryComponents: [
    ConfirmReleaseDocumentsModalComponent
  ]
})
export class DocumentsModule { }

核心模块

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

@NgModule({
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    ModalService
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }
}

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    DocumentsRoutingModule
  ],
  declarations: [
    // ...
    ConfirmReleaseDocumentsModalComponent
    // ...
  ],
  entryComponents: [
    ConfirmReleaseDocumentsModalComponent
  ]
})
export class DocumentsModule { }

功能模块

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

@NgModule({
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    ModalService
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }
}

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    DocumentsRoutingModule
  ],
  declarations: [
    // ...
    ConfirmReleaseDocumentsModalComponent
    // ...
  ],
  entryComponents: [
    ConfirmReleaseDocumentsModalComponent
  ]
})
export class DocumentsModule { }

我最初试图更换提供商，但由于某些原因，这不起作用：

providers: [
  { provide: NgbModal, useClass: ModalService },
]

因此，我尝试直接使用该服务：

组件打开模式

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

更新

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

@NgModule({
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    ModalService
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }
}

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    DocumentsRoutingModule
  ],
  declarations: [
    // ...
    ConfirmReleaseDocumentsModalComponent
    // ...
  ],
  entryComponents: [
    ConfirmReleaseDocumentsModalComponent
  ]
})
export class DocumentsModule { }

还尝试在服务中直接调用NgbModal而不进行扩展，但会产生相同的条目组件错误：

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

---

这与模块的延迟加载有关。如果条目组件位于延迟加载的模块中，则不会加载它们，并且必须上移到共享模块。发布的GitHub问题与模块中的入口组件不可用有关，但是它已经开放了一年多，没有贡献者的大量活动，因此它可能会成为一个问题，并在积压工作中存在一段时间-。

我们可以看到功能模块代码吗？嗨@ConnorsFan我已经添加了功能模块，将

ConfirmReleaseDocumentsModalComponent

添加到中的

导出

列表中

DocumentsModule

@ConnorsFan值得一试，但运气不佳。我发现了一个与此问题相关的GitHub问题，其中延迟加载模块中的条目组件不可用，因此我将其移动到了shared，并且可以正常工作