Плавающее окно на Angular, которое показывает окно ниже?

Question

У меня есть угловое приложение, которое отслеживает устройства на карте.Эти устройства также поддерживают двусторонний обмен текстовыми сообщениями, и я хотел бы иметь возможность открыть окно чата, которое располагается над картой и позволит пользователю общаться с устройствами, а также отслеживать местоположение этих устройств накарта.

Мой вопрос - возможно ли это?Я провел эксперимент и смог открыть плавающее окно поверх моей карты, но карта покрыта белым фоном, и все, что я вижу, - это окно чата, а не карта внизу.Можете ли вы как-то сделать это с оверлеем CDK?Я не смог найти ничего, что бы точно соответствовало моему сценарию.

Спасибо .....

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