@angular/cdk/overlay#OverlayRef TypeScript Examples

private attachDialogContainer(component: Type<any>, overlayRef: OverlayRef, config: ModalConfig, modalRef: ModalRef) {
        // PortalInjector() is deprecated
        const injector = Injector.create({
            providers:[
                {provide: ModalRef, useValue: modalRef},
                {provide: MODAL_MODEL, useValue: config.model}
            ], 
            parent:this.injector
        });
        const containerPortal = new ComponentPortal(component, null, injector);
        const containerRef = overlayRef.attach<Type<any>>(containerPortal);

        return containerRef.instance;
    }

constructor(
    public overlay: OverlayRef,
    public content: string | TemplateRef<any> | Type<any>,
    public config: NpModalConfig,
    public data: any
  ) {
    overlay.backdropClick().subscribe(() => {
      if (config.closeOnClickOutside === true) {
        this._close(null);
      }
    });
  }

protected createOverlay(): OverlayRef {
    const originPosition = getOriginPosition(this.position);
    const overlayPosition = getOverlayPosition(this.position);

    const positionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.elRef)
      .withGrowAfterOpen(true)
      .withPositions([
        { ...originPosition.main, ...overlayPosition.main },
        { ...originPosition.fallback, ...overlayPosition.fallback },
      ]);

    const scrollStrategy = this.overlay.scrollStrategies.reposition();

    const config = new OverlayConfig({
      positionStrategy,
      scrollStrategy,
    });
    return this.overlay.create(config);
  }

open(): OverlayRef {
    if (this.overlayRef) {
      return this.overlayRef;
    }
    const positionStrategy: GlobalPositionStrategy = this.overlay
      .position()
      .global()
      .centerHorizontally()
      .centerVertically();
    const overlayConfig = new OverlayConfig({
      hasBackdrop: true,
      positionStrategy,
    });
    const overlayRef = this.overlay.create(overlayConfig);
    const portal = new ComponentPortal(SpinnerLoaderComponent);
    overlayRef.attach(portal);
    this.overlayRef = overlayRef;
    return this.overlayRef;
  }

private attachDialogContent<T, D, R>(
    compOrTempRef: ComponentType<T> | TemplateRef<T>,
    dialogIns: DialogComponent,
    overlayRef: OverlayRef,
    config: DialogConfig<D>,
  ): DialogRef<T, R> {
    const dialogRef = new DialogRef<T, R>(
      overlayRef,
      dialogIns,
      this.scrollDispatcher,
      this.ngZone,
    );

    if (compOrTempRef instanceof TemplateRef) {
      dialogIns.attachTemplatePortal(
        new TemplatePortal(compOrTempRef, null, {
          $implicit: config.data,
        } as any),
      );
    } else {
      const injector = this.createInjector(config, dialogRef, dialogIns);
      const contentRef = dialogIns.attachComponentPortal<T>(
        new ComponentPortal(compOrTempRef, null, injector),
      );
      dialogRef.componentInstance = contentRef.instance;
    }
    return dialogRef;
  }

private attachDialog(
    overlayRef: OverlayRef,
    config: DialogConfig,
  ): DialogComponent {
    const dialogPortal = new ComponentPortal(
      DialogComponent,
      config.viewContainerRef,
    );
    const dialogRef = overlayRef.attach(dialogPortal);
    dialogRef.instance.config = config;
    return dialogRef.instance;
  }

constructor(
    private readonly overlayRef: OverlayRef,
    public dialogInstance: DialogComponent,
    scrollDispatcher: ScrollDispatcher,
    ngZone: NgZone,
  ) {
    dialogInstance.id = this.id;
    this.scrollable = new CdkScrollable(
      { nativeElement: overlayRef.overlayElement },
      scrollDispatcher,
      ngZone,
    );
    this.scrollable.ngOnInit();
  }

constructor(host: ElementRef<HTMLElement>,
              formBuilder: FormBuilder,
              public routerOutlet: SciRouterOutletElement,
              private _overlay: OverlayRef) {
    this.form = new FormGroup({
      [NAME]: formBuilder.control('', Validators.required),
      [VALUE]: formBuilder.control(''),
    }, {updateOn: 'change'});

    this._overlay.backdropClick()
      .pipe(takeUntil(this._destroy$))
      .subscribe(() => {
        this._overlay.dispose();
      });
  }

public static openAsOverlay(config: {anchor: HTMLElement; routerOutlet: SciRouterOutletElement; overlay: Overlay; injector: Injector}): void {
    const {anchor, routerOutlet, overlay, injector} = config;

    const positionStrategy = overlay.position()
      .flexibleConnectedTo(anchor)
      .withFlexibleDimensions(false)
      .withPositions([OVERLAY_POSITION_SOUTH]);

    const overlayConfig = new OverlayConfig({
      panelClass: 'e2e-router-outlet-settings-overlay',
      hasBackdrop: true,
      positionStrategy: positionStrategy,
      scrollStrategy: overlay.scrollStrategies.noop(),
      disposeOnNavigation: true,
      width: 350,
      backdropClass: 'transparent-backdrop',
    });

    const overlayRef = overlay.create(overlayConfig);
    const portal = new ComponentPortal(RouterOutletSettingsComponent, null, Injector.create({
      parent: injector,
      providers: [
        {provide: OverlayRef, useValue: overlayRef},
        {provide: SciRouterOutletElement, useValue: routerOutlet},
      ],
    }));
    overlayRef.attach(portal);
  }

constructor(host: ElementRef<HTMLElement>,
              private _routerOutlet: SciRouterOutletElement,
              private _overlay: OverlayRef) {
    this._overlay.backdropClick()
      .pipe(takeUntil(this._destroy$))
      .subscribe(() => {
        this._overlay.dispose();
      });
  }

public static openAsOverlay(config: {anchor: HTMLElement; routerOutlet: SciRouterOutletElement; overlay: Overlay; injector: Injector}): void {
    const {anchor, routerOutlet, overlay, injector} = config;

    const positionStrategy = overlay.position()
      .flexibleConnectedTo(anchor)
      .withFlexibleDimensions(false)
      .withPositions([OVERLAY_POSITION_SOUTH]);

    const overlayConfig = new OverlayConfig({
      panelClass: 'e2e-router-outlet-context-overlay',
      hasBackdrop: true,
      positionStrategy: positionStrategy,
      scrollStrategy: overlay.scrollStrategies.noop(),
      disposeOnNavigation: true,
      width: 500,
      height: 400,
      backdropClass: 'transparent-backdrop',
    });

    const overlayRef = overlay.create(overlayConfig);
    const portal = new ComponentPortal(RouterOutletContextComponent, null, Injector.create({
      parent: injector,
      providers: [
        {provide: OverlayRef, useValue: overlayRef},
        {provide: SciRouterOutletElement, useValue: routerOutlet},
      ],
    }));
    overlayRef.attach(portal);
  }

private showOverlay(): OverlayRef {
    return this.loaderService.open();
  }

private _overlayRef: OverlayRef;

private createOverlay(config: ModalConfig): OverlayRef {
        const overlayConfig = this.getOverlayConfig(config);
        return this.overlay.create(overlayConfig);
    }

constructor(private overlayRef: OverlayRef) {
    }

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

/** 浮层 */
  @Input() overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

private overlayRef: OverlayRef;

constructor(
    public overlay: OverlayRef,
    public content: string | TemplateRef<any>,
    public config: NpDialogConfig,
    public data: any
  ) { }

private overlayRef: OverlayRef;