Угловой материал: всплывающие окна: разрешить переход окна на экран второго монитора

Question

Попытка использовать Angular Material Dialog или любой компонент всплывающего окна. Есть следующие рабочие, кроме последней темы.

а) Задний исходный экран не должен быть серым,

б) пользователю разрешено вернуться в исходное первое окно за ним

c) Отправить данные обратно в исходный компонент окна.

г) Разрешить пользователю перемещать модальное / всплывающее окно на экран второго монитора, два монитора. Это не работает.

Просто должно быть обычное всплывающее окно. Как это можно сделать в Angular Material Dialog?

public openPropertySearchDialog(): void {
    const propertySearchDialogRef = this.openPropertySearchDialog.open(DocumentPropertyGridComponent, {
      width: '800px',
      height: '450px',
      disableClose: true,
      autoFocus: false,
      data: "test",
      hasBackdrop: false
    });

    propertySearchDialogRef.afterClosed().subscribe(result => {});
  }

Мы могли бы использовать javascript window.open, однако предпочтем Angular Material, который предлагает полную службу связи с привязкой данных. Если есть другой вариант Angular, он также может сработать для ответа.

Обычно пользователь нажимает переменную Компонент 1: "Добавить документ": selectedDocumentList: Array<string>, и данные отправлены Arrow Component 2: cumulativeDocumentList: Arrays<string>. Накопительный список обновляется в режиме реального времени. Пусть он работает с диалоговым окном окна материалов.

(щелкните изображение, чтобы увеличить)

Ресурс:

Как сделать материал MatDialog перетаскиваемым / угловым

Answer 1

Диалог материалов - это не окно. это просто элемент html, который появляется в абсолютной позиции, и даже если вы сделаете его перетаскиваемым, он будет только для текущего окна и не будет выходить за пределы текущей вкладки. window.open может быть выходом.

ИДЕЯ:

Можно создать маршрут с компонентом, который просто включает диалог материала и открывает его на хуке AfterViewInit.

например https://localhost:8443/dialogs/1 route и

когда вам нужно открыть диалог в новом окне, вы должны вызвать

  open() {
    const myWindow = window.open(
      'https://localhost:8443/dialogs/1',
      '_blank',
      'width=200, height=100'
    );
  }

и из всплывающего окна внутри

  onNoClick(data: string): void {
    this.dialogRef.close();
    console.log(window.opener);
    const parent = window.opener;
    // But is it possible to pass data to parent and make a change?
    // window.close();
  }

Как публично раскрыть методы angular 2?

Answer 2

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

Удачи