角度创建覆盖答案

【问题标题】：Angular Creating Overlay角度创建覆盖
【发布时间】：2019-01-23 14:37:12
【问题描述】：

我正在尝试创建自定义叠加层，但我不断收到以下错误：

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

我会继续研究这个。提前感谢您查看。

【问题讨论】：

标签： angular angular6 overlay angular-cdk

【解决方案1】：

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

您在创建叠加层时已经引用了它。

this._Dialog_Reference = this.CreateOverlay(_DIALOG_CONFIGURATIONS);

但是，如果您根据 Thoughtram 的示例返回不同的类，则必须通过构造函数导入它。在 Thoughtram 示例中，我认为如果您只是为自己或工作中的项目进行开发，那么使用 dispose 返回第二个类可能有点过分。如果您打算发布一个包，那么我建议您按照那里的示例返回一个不同的类，以便使用您的包的开发人员不太可能搞砸。

【讨论】：