Question

我有一个角度应用程序，可以在地图上跟踪设备。这些设备还可以进行双向文本消息传递，我希望能够打开一个浮动窗口，该窗口浮动在地图上方，并允许用户与设备聊天，同时还可以跟踪这些设备在地图上的位置。地图。

我的问题是-这可能吗？我进行了一次实验，能够在地图上方打开一个浮动窗口，但是地图上覆盖了白色背景，我所看到的只是聊天窗口，而不是下面的地图。您能以某种方式使用cdk overlay吗？我一直找不到能够完全满足我的情况的东西。

谢谢.....

Answer 1

可以。看一下这个例子：

interface dialogConfig {
  panelClass?: string;
  hasBackdrop?: boolean;
  backdropClass?: string;
  top?: string;
  right?: string;
}

const DEFAULT_CONFIG: dialogConfig = {
  hasBackdrop: true,
  top: '100 px',
  right: '20 px'
};

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

  constructor(private injector: Injector, private overlay: Overlay) {
  }

  open(config: dialogConfig = {}, component, data: any[]) {
    const dialogConfig = {...DEFAULT_CONFIG, ...config};

    const overlayRef = this.createOverlay(dialogConfig);

    const portal = new ComponentPortal(component, null, this.createInjector({data}));

    overlayRef.attach(portal);

    const dialogRef = new FilePreviewOverlayRef(overlayRef);

    overlayRef.backdropClick()
      .subscribe(() => {
        dialogRef.close()
      });
    return dialogRef;
  }

  private createInjector(data): PortalInjector {

    const injectorTokens = new WeakMap<any, any>([
      [PORTAL_DATA, data],
    ]);

    return new PortalInjector(this.injector, injectorTokens);
  }

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

  private getOverlayConfig(config: dialogConfig): OverlayConfig {
    const positionStrategy = this.overlay.position()
      .global()
      .top(config.top)
      .right(config.right);

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

}

class FilePreviewOverlayRef {

  constructor(private overlayRef: OverlayRef) {
  }

  close(): void {
    this.overlayRef.dispose();
  }
}

export const PORTAL_DATA = new InjectionToken<{}>('PortalData');

在Angular上显示以下窗口的浮动窗口？

1 个答案: