Angular Material:弹出窗口:允许窗口移动到第二个监视器屏幕 [英] Angular Material: Popup Windows : Allow Window Move to Second Monitor Screen

问题描述

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

Trying to use Angular Material Dialog or Any Popup Window Component. Have following working, except last topic.

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

a) Back original screen should Not be greyed out,

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

b) User allowed to click back in original first window behind it

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

c) Send data back to original window Component.

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

d) Allow user to move modal/popup window to Second Monitor Screen, dual monitors. This is not working.

它应该是常规弹出窗口.如何在 Angular Material Dialog 中做到这一点?

Simply it should be regular popup. How can this be done in 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 选项，那也可以作为答案.

We could use javascript window.open, however prefer Angular Material which offers full data binding communication service. If there is another Angular option, that can also work for answer.

基本上用户按下组件 1:添加文档"；变量:selectedDocumentList: Array，以及发送的数据箭头组件 2:cumulativeDocumentList:Arrays.累积列表实时更新.让它与材质窗口对话框一起使用.

Basically user presses Component 1: "Add Document" variable: selectedDocumentList: Array<string>, and data sent Arrow Component 2: cumulativeDocumentList: Arrays<string> . Cumulative list gets updated in real time. Have it working with Material Window Dialog.

(点击图片放大)

(click picture to zoom in)

资源:

如何制作可拖动的 MatDialog/Angular Material

推荐答案

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

Material Dialog is not a window. it's just html element that pops up in absolute position and even if you make it draggable ,it's only for current window and wont go outside of current tab. window.open might be the way to go.

想法:

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

It is possible to create a route with a component which just includes Material Dialog and opens it on AfterViewInit hook.

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

like https://localhost:8443/dialogs/1 route and

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

when you need to open the dialog in new window you would call

  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 方法?

这篇关于Angular Material:弹出窗口:允许窗口移动到第二个监视器屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！