Question

我正在尝试创建自定义叠加层，但是仍然出现以下错误：

ERROR Error: StaticInjectorError(AppModule)[OverlayRef]: 
  StaticInjectorError(Platform: core)[OverlayRef]: 
  NullInjectorError: No provider for OverlayRef!
  at NullInjector.push.../../node_modules/@angular/core/fesm5/core.js.NullInjector.g t (core.js:8894)
  at resolveToken (core.js:9139)
  at tryResolveToken (core.js:9083)
  at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
  at resolveToken (core.js:9139)
  at tryResolveToken (core.js:9083)
  at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
  at resolveNgModuleDep (core.js:21120)
  at NgModuleRef_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21809)
  at injectInjectorOnly (core.js:1772)

现在，我确信乍一看它似乎丢失了OverlayModule，但是它是导入的。

我可以从@ angular / cdk / overlay导入Overlay和OverlayConfig；没有任何问题。但是，一旦我添加OverlayRef，错误就会出现。

找到了角度叠加参考here

我之前没有创建叠加层，因此我正在遵循Thoughtram的this指南。唯一的区别是我没有创建单独的服务来处理Overlay的关闭。

以下代码：

@Injectable({
  providedIn: 'root'
})
export class OverlayHandlerService {

private readonly DEFAULT_CONFIG: OverlayHandlerDialogProperties = {
  hasBackdrop: true,
  backdropClass: 'dark-backdrop',
  panelClass: 'tm-file-preview-dialog-panel',
  scrollStrategy: this.overlay.scrollStrategies.noop()
}

constructor(private overlay: Overlay, private overlayRef: OverlayRef) { 

}

private CreateOverlay(config: OverlayHandlerDialogProperties): OverlayRef {
  const _OVERLAY_COFIG = this.GetOverlayConfig(config);

  return this.overlay.create(_OVERLAY_COFIG);
}

private GetOverlayConfig(config: OverlayHandlerDialogProperties): 
  OverlayConfig {
    const _POSITION_STRATEGY = this.overlay.position()
    .global()
    .centerHorizontally()
    .centerVertically();

  const _OVERLAY_CONFIG = new OverlayConfig({
    hasBackdrop: config.hasBackdrop,
    backdropClass: config.backdropClass,
    panelClass: config.panelClass,
    scrollStrategy: this.overlay.scrollStrategies.block(),
    positionStrategy: _POSITION_STRATEGY
  });

  return _OVERLAY_CONFIG;
}

public OpenOverlay(overlayComponent: any, configurations?: 
OverlayHandlerDialogProperties): void {
    const _DIALOG_CONFIGURATIONS = { ...this.DEFAULT_CONFIG, ...configurations };
    const _OVERLAYREF = this.CreateOverlay(_DIALOG_CONFIGURATIONS);
    const _OVERLAYPORTAL = new ComponentPortal(overlayComponent);

    _OVERLAYREF.attach(_OVERLAYPORTAL);
 }

 public CloseOverlay(): void {
   this.overlayRef.dispose();
 }
}

我将继续对此进行研究。预先感谢您的浏览。

Answer 1

首先要小心一点。你在那里打错字了。不确定那是否弄乱了。

（..）

private CreateOverlay(config: OverlayHandlerDialogProperties): OverlayRef {
  const _OVERLAY_COFIG = this.GetOverlayConfig(config);

  return this.overlay.create(_OVERLAY_COFIG); # Note _OVERLAY_CONFIG

请确保您的意思是CONFIG，而不是COFIG。

（..）

稍后可能会检查您的问题。

Answer 2

从我的测试看来，您无法在同一服务中同时导入Overlay和OverlayRef，这将导致上述错误。

创建叠加层时，您已经有了对其的引用。

this._Dialog_Reference = this.CreateOverlay(_DIALOG_CONFIGURATIONS);

但是，如果按照Thoughtram的示例返回了另一个类，则必须通过构造函数将其导入。在Thoughtram的示例中，我认为如果只为自己或工作中的项目进行开发，那么第二类要归还可能会有点过分。如果您打算发布程序包，那么我建议按照以下示例返回一个不同的类，以使使用您程序包的开发人员很少有麻烦的机会。

角度创建叠加

2 个答案: