时间戳

首页 > 解决方案 > Angular上的浮动窗口显示下面的窗口？

angular - Angular上的浮动窗口显示下面的窗口？

问题描述

我有一个在地图上跟踪设备的角度应用程序。这些设备还能够双向发送短信，我希望能够打开一个浮动在地图上方的聊天窗口，允许用户与设备聊天，同时还可以跟踪这些设备在地图。

我的问题是——这可能吗？我进行了一个实验，能够在我的地图顶部打开一个浮动窗口，但是地图被白色背景覆盖，我只能看到聊天窗口，而不是下面的地图。你能以某种方式用 cdk 覆盖做到这一点吗？我无法找到任何完全涵盖我的场景的东西。

谢谢.....

标签： angularangular-material

解决方案

是的你可以。看看这个例子：

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');

推荐阅读