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

问题描述

尝试使用角度材质对话框"或任何弹出窗口组件.除最后一个主题外，还有其他工作.

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.

它应该是常规弹出窗口. 如何在角度材质"对话框中完成此操作?

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<string>，并发送了数据箭头组件2:cumulativeDocumentList: Arrays<string>.累积列表会实时更新.使其与材质窗口对话框"一起使用.

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可拖动/角材料

推荐答案

材料对话框不是窗口.它只是在绝对位置弹出的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.

想法:

可以使用仅包含材质对话框"的组件创建一条路线，并在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();
  }

如何公开公开角度2方法?

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