Угловое создание оверлея - PullRequest
Новая
       20

Угловое создание оверлея

0 голосов
/ 23 января 2019

Я пытаюсь создать пользовательское наложение, но получаю следующее сообщение об ошибке: 

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, однако он импортирован.

Я могу импортировать Overlay и OverlayConfig из @ angular / cdk / overlay;без каких-либо проблем.Однако, как только я добавлю OverlayRef, появится сообщение об ошибке.

Ссылка на угловое наложение найдена здесь

Я не создавал наложение ранее, поэтому я следую это руководство от Thoughtram.Разница лишь в том, что я не создаю отдельную службу для обработки закрытия оверлея.

Код ниже: 

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

Я продолжу изучать это,Заранее спасибо за внимание.

1 Ответ

0 голосов
/ 23 января 2019

Из моего тестирования кажется, что вы не можете импортировать как Overlay, так и OverlayRef в одном сервисе, это приведет к ошибке выше.

У вас уже есть ссылка на оверлей, когда вы его создаете.

this._Dialog_Reference = this.CreateOverlay(_DIALOG_CONFIGURATIONS);

Однако, если вы вернете другой класс, как в примере с Thoughtram, вы получитеимпортировать его через конструктор.В примере Thoughtram я думаю, что иметь второй класс, чтобы вернуться с dispose, может быть слишком много, если вы разрабатываете только для себя или проекта на работе.Если бы вы собирались опубликовать пакет, я бы предложил последующий пример с возвратом другого класса, чтобы у разработчика, использующего ваш пакет, было меньше шансов испортить.

...