Question

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

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

如何做到这一点，用户可以像最后一个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移动，而不是固定第一个模态窗口，则可以将其作为答案。

资源：

How can i make a MatDialog draggable / Angular Material

Answer 1

这是一个近似的反应，但是行为可能会启发您

您可以为每个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,...){}

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

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

只需在（单击）中调用该函数-仅在单击标题或在多个位置时才可以调用功能。

一个stackblitz

注意：如果父级打开子级，则将其存储在变量中。因此，在打开子级之前，请检查变量，如果变量已打开，只需将其发送到顶部

角材料：弹出窗口：允许窗口在前后之间移动

1 个答案: