Angular Material：弹出 Windows：允许 Window 移动到第二个监视器屏幕

Question

正在尝试使用 Angular Material 对话框或任何弹出窗口 Window 组件。除了最后一个主题外，还有以下工作。

a) 返回原始屏幕不应变灰，

b) 允许用户在原先window后面点击返回

c) 将数据发送回原始 window 组件。

d) 允许用户将 modal/popup window 移动到第二个显示器屏幕，双显示器。这不起作用。

简单地说，它应该是常规弹出窗口。如何在 Angular Material 对话框中完成此操作？

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>，然后数据发送到箭头组件 2：cumulativeDocumentList: Arrays<string>。累积列表实时更新。让它与 Material Window 对话框一起工作。

(点击图片放大)

资源：

How can i make a MatDialog draggable / Angular Material

Answer 1

Material 对话框不是 window。它只是在绝对位置弹出的 html 元素，即使您使其可拖动，它也仅适用于当前 window 并且不会超出当前选项卡。 window.open 可能是正确的选择。

想法：

可以使用仅包含 Material 对话框的组件创建路由，并在 AfterViewInit 挂钩上打开它。

喜欢 https://localhost:8443/dialogs/1 路由和

当您需要在新 window 中打开对话框时，您可以调用

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

并从弹出 window 里面

  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();
  }

Answer 2

其实并不是把组件拖出屏幕那么简单。一种可能的解决方法是向要拖动的模式添加一个按钮，并使该按钮在不同的浏览器选项卡中打开某个组件，您可以将其拖到 window 之外进入不同的屏幕。但这会带来一些挑战，例如，这个组件需要路由，可能使用不同的路由器插座，因为你想使用不同的布局。

祝你好运

Angular Material：弹出 Windows：允许 Window 移动到第二个监视器屏幕

Angular Material: Popup Windows : Allow Window Move to Second Monitor Screen

typescript

angular-material

angular

angular8

material-dialog