-1

我们有 1) 材质对话框组件打开 2) 另一个材质对话框组件，当用户按下“打开高级搜索”按钮时。

第一个 Dialog 组件处于固定位置。第二个对话框组件是可移动的，但还不能落后于第一个原始组件。

如何做到这一点，用户可以互换两个窗口的后部或前部位置，就像典型的 Windows 10 桌面应用程序一样，取决于最后单击/拖放/拖放的内容？

第二部分：

public openAdvancedPropertySearchDialog(): void {
    const advancedApnSearchDialogRef = this.advancedApnSearchDialog.open(DocumentPropertyGridComponent, {
      width: '800px',
      height: '450px',
      disableClose: true,
      autoFocus: false,
      data: "test"
      hasBackdrop: false
    });
    advancedApnSearchDialogRef.afterClosed().subscribe(result => {});
  }

第二个组件的 HTML 代码：它是可移动的：第一个组件对话框应该在理想的固定位置

<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <div class="row">
    <button class="dialog-button close-button" mat-button (click)="onCancel()">X</button>
  </div>
  <app-document-property-grid></app-document-property-grid>  
</div>

在此处输入图像描述

*如果只有可能两个组件都可以使用 cdkDrag 移动，而不是第一个 Modal 窗口被固定，则可以接受作为 answer 。

资源：

我怎样才能使 MatDialog 可拖动/角度材质

4

1 回答 1

2

这是一个近似的反应，但也许可以启发你

您可以为每个 MatDialog 分配一个不同的“id”（并作为数据元素传递）

const dialogRef = this.dialog.open(YourComponentDialog, {
      width: '250px',
      data: {data: test, id:'child'}, //<--this
      disableClose:true,
      hasBackdrop:false,
      id:'child' //<--this 

    });

如果在组件的构造函数中注入 OverlayContainer

constructor(public cdk:OverlayContainer,...){}

您可以创建一个接收“id”的函数 toTop

  toTop(id)
  {
    this.cdk.getContainerElement().childNodes.forEach((x:any)=>{
      if (x.innerHTML.indexOf('id="'+id+'"')<=0)
        x.style["z-index"]=1000;
      else
        x.style["z-index"]=1001;
    })
  }

只需简单地调用 (click) 中的函数 - 只有单击标题或在多个位置才能调用该函数。

堆叠闪电战

注意：如果父母打开孩子，则存储在变量中。所以在打开孩子之前，检查变量，如果是打开的，只需将它发送到顶部

于 2020-07-09T09:51:09.547 回答