Angular Material：弹出窗口：允许窗口在前后之间移动

Posted 2023-05-08

【中文标题】Angular Material：弹出窗口：允许窗口在前后之间移动

【英文标题】：Angular Material: Popup Windows : Allow Windows to Go Between Front and Back

【发布时间】：2020-10-29 15:09:48

【问题描述】：

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

第一个 Dialog 组件处于固定位置。 第二个 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 移动，而不是第一个 Modal 窗口被固定，则可以接受作为答案。

资源：

How can i make a MatDialog draggable / Angular Material

【参考方案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

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

【讨论】：

我认为他也可以使用(mousedown)事件。这将更好地模拟桌面行为

刚刚更正，感谢 yurzui !!，此外，我将孩子的 ngOnInit 调用到函数 toTop 以确保孩子在出现时总是出现在顶部

谢谢，我会试试这个，希望 Angular Material 有一个简单的参数 back/front，不使用这些函数，material.angular.io/components/dialog/api

嗨@Eliseo 谢谢，你知道这个答案吗？ ***.com/questions/62824591/…

@AlanSmith5482，关于“变灰”，只能使用backdropClass：material.angular.io/components/dialog/api#MatDialogConfig。如果你定义了一个类如：.backdrop-transparentbackground-color:transparent，在打开窗口的时候，你可以添加backdropClass:'backdrop-transparent' - 不要忘记在打开子的两个组件中包含这个类，