Question

尝试使用“角度材质对话框”或任何弹出窗口组件。除最后一个主题外，请执行以下工作。

a）背面的原始屏幕不应变灰，

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

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

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

简单来说，它应该是常规弹出窗口。如何在“角度材质”对话框中完成此操作？

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

Answer 1

材料对话框不是窗口。它只是在绝对位置弹出的html元素，即使您使其可拖动，也仅适用于当前窗口，不会超出当前选项卡。 window.open可能是解决方法。

想法：

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

Answer 2

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

祝你好运

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

2 个答案: