角度材料：弹出窗口：允许窗口移动到第二个监视器屏幕

Posted 2023-05-08

【中文标题】角度材料：弹出窗口：允许窗口移动到第二个监视器屏幕

【英文标题】：Angular Material: Popup Windows : Allow Window Move to Second Monitor Screen

【发布时间】：2020-10-30 14:57:02

【问题描述】：

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

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

b) 用户允许在其后面的原始第一个窗口中单击返回

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

d) 允许用户将模式/弹出窗口移动到第二个监视器屏幕，双监视器。这不起作用。

只是它应该是常规弹出窗口。 如何在 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>，并发送数据箭头组件 2：cumulativeDocumentList: Arrays<string>。累积列表实时更新。让它与材料窗口对话框一起使用。

（点击图片放大）

资源：

How can i make a MatDialog draggable / Angular Material

【参考方案1】：

Material Dialog 不是窗口。它只是在绝对位置弹出的 html 元素，即使您将其设为可拖动，它也仅适用于当前窗口，不会超出当前选项卡。 window.open 可能是要走的路。

想法：

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

像 https://localhost:8443/dialogs/1 路由和

当您需要在新窗口中打开对话框时，您会调用

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

How to expose angular 2 methods publicly?

【讨论】：

好的，问题是使用 Angular 和双向通信绑定的解决方案，Angular 有任何库选项吗？谢谢

这个要求让事情变得非常复杂。如果这是一个硬性要求，您可能不得不问自己浏览器应用程序是否适合。没有一个简单的答案。

嗨 @MikeOne 我相信人们在 Angular 中很多人都有这个话题，不确定在对话框或窗口之间进行通信的最佳方式是什么，如果 Angular 材料不起作用，则可以使用任何 Angular 解决方案

嗯，我能想到的唯一方法是让它工作是你在一个新窗口中打开 MatDialog ，当对话框关闭时，它会关闭弹出窗口并将数据传递给父并关闭窗口。但问题是我们如何从窗口对象中获取组件的实例。

可能是广播频道或本地存储？

【参考方案2】：

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

祝你好运