Angular Материал: Всплывающее окно Windows: Разрешить переход окна на экран второго монитора

Question

Попытка использовать Angular Диалог материалов или любой компонент всплывающего окна. Имеются следующие рабочие места, кроме последней вершины c.

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

b) Пользователь может вернуться в исходное первое окно позади него

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

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

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

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 Материал, который предлагает полную службу связи с привязкой данных. Если есть другой вариант Angular, он также может работать для ответа.

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

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

Resource:

Как сделать MatDialog перетаскиваемым / Angular Материал

Answer 1

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

IDEA:

Можно создать маршрут с компонентом, который просто включает в себя диалоговое окно материалов и открывает его на хуке 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

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

Удачи